Sass的使用

Sass简介
css编写时权重难以控制，嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。

sass是世界上最好的css扩展语言。在正常的编写css的基础上，增加了很多变量，函数，循环，判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数（如颜色加深，颜色淡化）用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。

sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用。
编译Sass
需要安装工具
命令行：安装npm i-g sass
使用 sass 待编译的sass文件路径 编译后的文件路径
每修改一次就要重新编译，很麻烦，所以用命令实时监控Sass
sass --watch 等待编译的sass文件路径或者文件夹：编译后的文件路径或者文件夹
sass的官网
https://www.sass.hk/
其后缀分为两种
一种为sass，一种为scss，区别是有无大括号，推荐使用scss，因为他与平常写的css文件差不多
sass注释
//单行注释，编译时候不保留
/*
多行注释，编译时候保留，压缩时候不保留
/
如果要在压缩时候保留多行注释，可以这样写：
/！
*/
变量使用$定义变量
$color:red; $font_size:12px; .header{ background-color: $color; font-size:$font_size*2; }
一边用来定义常用颜色和常用像素
嵌套
/*后代关系*/ .wrap{ div{ width:$font_size*10; } } /*子类关系*/ ul{ >li{ padding:12px; } } /*大括号中表示自己*/ .nav{ &:hover{ background-color: $color; } li{ &:hover{ color:$color; } } } /*群组嵌套按正常写即可*/ /* 属性嵌套 */ .content{ border: { style:solid; color:$color; width:2px; } } .left{ border:1px solid #000{ left:none; bottom:{ width:3px; } }; }
伪类
要用&
混合器
可以理解为一个函数
用@mixin 名字{}定义；
调用混合器
@include 名字
混合器可以带参数，默认值用：
例子 /* 定义混合器 */ @mixin bor{ border:1px solid #000; } /* 使用混合器 */ .box{ @include bor; } /* 带参数的混合器 */ @mixin bac($path,$color,$repeat){ background:url($path) $color $repeat; } /* 使用混合器 */ .box1{ @include bac("img/1.jpg",red,no-repeat); } /* 带有默认值的参数 */ @mixin bac($path:"img/1.jpg",$color:blue,$repeat:no-repeat){ background:url($path) $color $repeat; } /* 使用混合器 */ .box2{ @include bac("img/2.jpg",green); }
继承
当有选择器需要使用上面的样式时候，就可以用继承讲他拿下来使用
语法：
@extend 要使用上面的选择器
如果要使用其某个属性，可以单独定义个无意义的选择器，语法
_名字{}
例子：
.box1{ width: 100px; height: 100px; } .box2{ @extend .box1; border:1px solid #000; }
导入
在一个文件中定义变量和混合器，在写css时候比较混轮，通常将其放在一个单独文件中，通过命令导入进来
语法 引入：@import 文件路径