sass的基本使用

是什么

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;
}

基本的使用就介绍到这里了！