sass

一，简介

sass文件的后缀名 ?

xxx.sass xxx.scss

把这种浏览器不认识的文件 ， 转成浏览器认识的文件

.sass | .scss -> .css

怎么转换？

1.用工具 gulp工具 webpack工具 2.sass官网自带的工具 3.网上有很多第三方的工具 koala(考拉) 4.vsCode有插件 （方便学习） Easy Sass

官网

https://sass-lang.com https://www.sass.hk

.sass -> 语法类似于python

body font-size:16px ul list-style:none

.scss -> 语法类似于css (推荐)

body{font-size:16px} ul{list-style:none}

二，Sass语法

1.注释

// 不会被编译 /* */ 会被编译

2.变量

$num : 100px; .box1{ width:$num;} .box2{ width:$num;} .box3{ width:$num;} $num: 150; $cent: %; .box1{ width:$num + $cent;}

插值，可以让属性做成变量的形式

$foo : width; .box1{ #{foo}:100px;} $foo : width; $num : 3; .box#{$num}{ #{$foo}:100px;}

作用域 ：就近原则，要注意查找的顺序

$num : 100px; .box{ height: $num; $num :200px; width: $num; }

嵌套

div{} div ul{} div ul li{} div ul li p{} div{ ul{ li{ p{ } } } } div{ background: red; ul{ list-style:none; li{ float:left; p{ font-size:16px; } span{ color: blue; } } } } //在嵌套的时候， 添加一个&符号， 可以忽略空格 div{ &:hover{ background: red; } &.box{ width : 100px; } } div{ font-size: 10px; font-weight: bold; font-family : '宋体'; } div{ font:{ size: 20px; weight: bold; family: '宋体' } }

三，运算

如果计算的值都有单位是不能计算的 /: 比较特殊， css本身可能会用到这个斜线， 所以要做除法的时候，可以用（）括起来来表示除法计算

$num : 100px; div{ width: $num +20px; height: $num *2px; margin : ($num / 2)px; font: 30px /2 border-radius : 20px / 30px; background-clip : border-box; background-origin : border-box; }

计算颜色

$num : #100100; div{ color : $num * 3; }

函数 round() percentage() random()

div{ width: round(3.22px); height: percentage(0.2); margin: random(); color: rgb( random()*255,random()*255,random()*255 ) }

内置函数

自定义函数

@function sum( $a , $b){ @returm $a + $b ; } div{ width : sum(4,5) + px; }

混入

@mixin hide{ display : none; color : red; } .box1{ width : 100px; @include hide; } .box2{ @include hide; } @mixin hide($color){ display : none; color : $color; } .box1{ @include hide(red) } .box2{ @include hide(yellow) }

混入不会做群组 ， 继承会编译成群组

继承

%叫做占位符， 不会渲染 继承不能传参

%hide{ display : none; } .box1{ @extend %hide; } .box2{ @extend %hide; }

合并

div{ background : url('a.jpg'), url('b.jpg'); transform : scale(1.5) rotate(360deg); } $background: ( a: url(1.png), b: url(2.png) ); div { background : map-values($background); } $a : url(1.png); $b : url(2.png); div{ background : $a $b; }

四，逻辑语句

$num :10; .box{ @if( $num > 20){ width : 100px; } @else{ width: 50px; } }

循环

@for $i from 0 through 4{ .box{ width : $i +px; } }

五，CSS模块化

@import ‘./xxx.scss’;