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