css学习——sass(6)

第一步，全局安装 sass

在命令行工具：

npm install -g sass

查看版本

sass --version

 第二步：手动将sass 编译为css

1、创建一个test.scss :

 2、在命令行终端 输入sass test.scss test.css进行编译

 第三步、监听者目录，sass 自动编译： 通过传参数 --watch 告诉sass编译器监听者目录

sass-style是被监听的目录，css-style是被编译成css文件的存放目录

sass --watch sass-style:css-style

监听前 ：

监听命令 ：

 监听后：

三、修改sass编译输出css的格式：--style 默认[expanded (default), compressed]，目前只有这个2个值，可能是和我的版本有关系（1.56.0），默认是expanded

其他的版本可能有的值 

1、nested:嵌套；默认

2、compact:紧凑 ；

3、expanded:展开；

4、compressed:压缩

格式比较： 

sass --watch sass-style:css-style --style compressed

 sass --watch sass-style:css-style --style expanded

Sass 的用法：

第一：变量、混入@mixin name/@include name;占位符（%name）/选择器 继承extend %name;

1-1：变量的类型：number、string、boolean、null、map、list;

变量声明：$color:#fff;

1-2：混入的总结：

1、可以重复使用的css规则，一次声明多次使用；

2、不使用不会编译到，目标文件。

3、可以传参数。

// 声明变量
 $primary:#fff;// 无参数 mixin
 @mixin border {border: 2px solid red;
 }/*** 声明mixin 带参数* * 参数不传报错* **/ @mixin ellipsis($line) {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;	-webkit-line-clamp:$line;-webkit-box-orient: vertical;
 }/*** 声明mixin 带参数,有默认值* * 1、不传参数：@include text；** 2、按顺序传参：@include text(20, 600,2em);	** 3、指定传参：@include text($left:4em);**/ 
 @mixin text($size:16,$weight:400,$left:2em) {font-size: $size;font-weight: $weight;padding-left: $left;
 }/*
 *可变参数
 *
 *@include linearGradient(to top, red,green);	
 */
 @mixin linearGradient($direction,$gradient...) {background-color: nth($gradient,2);background-image:linear-gradient($direction,$gradient)
 }

1-3：继承、占位符总结：

共同点：

1、都是@extend引入；

2、都是生成分组选择器的形式，

不同点：

1、类选择器：不继承也会被编译到目标文件；

2、占位符选择器：需要继承才会编译到目标文件；

混入和继承的区别：

混入：每一个include都是复制一份；使代码量变大。

继承：使用分组选择器封装继承部分；代码量不变。

第二操作符：

1、关系运算符：==、！=，>、 < 、>= 、<=，

2、逻辑运算符：and 、or 、not;

3、数字操作符： +、 * 、/、 %；

关系运算符：

 逻辑运算符：

 第三：插值语句：#{变量}，应用到选择器，属性名，属性值；

$size:20px;
$lineheight:30px;
$class:class-name;
$color:color;

.#{$class}{
     color: red;
}
.test{
    border-#{$color}:red ;
}
.text{
    @include test(2);
    font-size:#{$size}/#{$lineheight};
}

第四：sass 常见函数：

颜色：lighten、darken、opacity ;

数值：abs、ceil、floo、max、min、random;

列表:lenght、nth、append、index;

map：map-get、map-has-key、map-keys，map-values;

自检函数：variable-exists;

第五流程控制指令和循环：@if、 @else、@else if、@for 、@each 、@while，三元运算符

 @mixin test($type) {@if ($type>2 and $type<10){color: red;}@else if( $type>11 and $type<20){color: blue;}@else{color: green;}
 }.text{@include test(5);
 }
 .text2{@include test(15);
 }
 .text3{@include test(1);
 }
 // 不包含4
 @for $i from 2 to 4{.to-#{$i}{width: 10px;}
 }
 // 包含4
 @for $i from 1 through 4{.through-#{$i}{width: 10px;}
 }$list: red green blue pink;
 @each $color in $list{$index:index($list, $color);.p#{$index - 1}{background-color: $color;}
 }
 $condition:10;
 @while $condition>0 {.col-#{$condition}{background-color: red;}$condition:$condition - 1}$var:10;
 .test{color:if($var == 10,red,blue);
 }

第六：@function

@function test($count){	@return percentage(1 / $count);
 }@for $i from 1 to 5{.p-#{$i}{width: test($i);}
 }

参数规则和@mixin一样；

第七：@use