是什么
sass是css的扩展语言。用来写css的。
解决css缺点:
选择器很长
有可能漏掉 - 选择不准确
有可能将顺序弄混 - 选择不到
权重不好区分
sass专门用来解决这个问题的。甚至,可以像写编程语言一样去写css。可以写判断,可以写循环,可以写函数,导入语法,继承语法 …
其实,所有的css扩展语言都可以这样做,css的扩展语言有:sass less stylus …
怎么用
sass提供了两种文件的后缀:
- .sass后缀:这种后缀的文件,写起来不需要大括号的,通过缩进来描述嵌套关系的。太危险,一不小心就缩进错误了。
- .scss后缀:这种后缀的文件,写法就跟css差不多了。
sass文件,浏览器是不能直接识别的,我们需要将他转成css才能使用。
转换是需要工具的,nodejs中有一个工具,可以直接编译sass文件成css文件,这个工具名称:sass
下载安装:
npm i sass -g
安装好的测试:
sass --version
具体使用:
sass 待编译的文件 编译以后的css文件路径
sass test.scss ./test.css
为了方便开发,sass提供了一个监视的命令:
# 可以在被编译的文件发生变化的时候,自动进行编译
sass --watch 被编译的文件:编译后的文件
sass --watch test.scss:./test.css
为了进一步方便,sass提供了一个监视文件夹变化的命令:
sass --watch 被编译的文件所在的文件夹:编译后的文件所在文件夹
sass --watch scss:./css
怎么写
注释
// 单行注释 - 是不会被编译的
/*
多行注释
多行注释
当文件进行压缩的时候,多行注释就不会被保留了
*/
/*!
这是注释是会被强制保留的
*/
变量
变量的定义:$变量名:值;
// 变量的定义:
/*
$变量名:值;
*/
$color:grey; // 值不需要加引号
通常会定义变量的场景:
1.常用的颜色:主色调/别的颜色
2.常用的尺寸:1px 3px
嵌套
选择器的嵌套
/* 1.选择器的嵌套 */
div{
p{
color:red;
}
>p{
width: 100px;
}
+div{
height: 200px;
}
a:hover{
color:blue;
}
// &表示所在大括号所属的选择器
&:hover{
color:green;
}
}
css属性的嵌套:
div{
// border:3px solid #000;
// border-left:3px solid #000;
// border-left-width:3px;
// border-left-style:solid;
// border-left-color:#000;
// border-right:3px solid #000;
// border-top:3px solid #000;
// border-bottom:3px solid #000;
border: {
left: {
width:3px;
style:dotted;
}
}
/*
能嵌套的css属性:带连字符的属性都可以嵌套
border
background
margin
padding
font
text
line
list
*/
}
函数(混合器)
函数在 sass 中叫混合器,用mixin
表示
// 在sass中,函数被叫做混合器
// 定义
/*
@mixin 函数名{
函数代码
}
*/
@mixin bor {
border:1px solid #000;
background-color: #f00;
}
/*
定义带参数的函数
@mixin 函数名(形参){
函数代码
}
*/
@mixin bac ($color,$path) {
background: $color url($path);
}
@mixin border($width,$color,$style:solid){
border:$color $style $width;
}
// 调用
/*
@include 函数名;
*/
div{
@include bor;
}
p{
@include bac(red,"1.jpg");
@include border(3px,green,dashed);
}
继承
一个选择器中想使用另一个选择器中的css,叫继承
继承语法: @extend 被继承的选择器;
// div{
// width: 100px;
// height: 100px;
// background-color: #f00;
// }
// p{
// // 想使用div的样式 *- 继承div
// // 继承语法
// /*
// @extend 被继承的选择器;
// */
// @extend div;
// color:Red;
// }
// 提取共同样式
_{
width: 100px;
height: 100px;
}
.a{
@extend _;
background-color: #f00;
}
.b{
@extend _;
color:Red;
}
导入
导入语法:@import “文件路径”;
@import "./variable.scss";
@import "./mixin.scss";
div{
// $color是在别的文件中定义好的,在这里需要使用它,需要将另一个文件导入进来
background-color: $color;
@include border(3px,red);
@include bor;
}
判断
$red:red;
$blue:blue;
$width:1px;
div{
// 判断 1==1的话,就使用$red,如果1!=1就是用$blue
@if $width==1px{
background-color: $red;
}@else{
background-color: $blue;
}
}
循环
$width:10px;
@for $i from 1 through 5{
// 识别变量 #{变量}
li:nth-child(#{$i}){
width:$width*$i;
}
}
// 使用to不包含最大值
@for $i from 1 to 5{
// 识别变量 #{变量}
div:nth-child(#{$i}){
width:$width*$i;
}
}
编译后的 css
li:nth-child(1) {
width: 10px;
}
li:nth-child(2) {
width: 20px;
}
li:nth-child(3) {
width: 30px;
}
li:nth-child(4) {
width: 40px;
}
li:nth-child(5) {
width: 50px;
}
div:nth-child(1) {
width: 10px;
}
div:nth-child(2) {
width: 20px;
}
div:nth-child(3) {
width: 30px;
}
div:nth-child(4) {
width: 40px;
}
基本的使用就介绍到这里了!