scss基本使用

scss定义变量

$符号标识来定义变量

变量名用中划线和下划线分隔其实是表示一个意思

$color_base和$color-base其实指向的是同一个变量。

父选择器的标识符&

div{
    color:red;
    &:hover{
        color:bule;
    }
}

群组选择器的嵌套

//css使用
.aaa h1, .aaa h2, .aaa h3{
    font-size:30px
}

// sass嵌套使用

.aaa{
    h1,h2,h3{
      font-size:30px;
    }
}

.bbb, .ccc{
    h2{
        font-size:16px;
    }
}

子组合选择器和同层组合选择器：>、+ 和 ~

// 子组件选择器
// 选择 .aaa 的子元素中的 p 标签
.aaa > p{
    font-size:20px;
}

// 选择 .aaa下所有的 p 标签
.aaa p{
    font-weight:bold;
}

// 同层组合选择器
// 只选择同层 *相邻* *紧跟着* 中间不能有其他的p标签
.bbb+p{
    color:red;
}

// 选择同层全体的 p 标签  不管隔了多少其他的元素
.bbb~p{
    color:yellow;
}

// scss案例
acticle{
    ~acticle{
        border:1px solid red;
    }
    > section{
        background-color:red;
    }
    dl > {
        dt{
            color:#ccc
        }
    }
    nav + & { // 等价于nav+acticle
        margin-top:0;
    }
}

嵌套属性

nav{
    border-style:solid;
    border-width:4px;
    border-color:#ccc;
}

border:{
    style:solid;
    width:4px;
    color:#ccc;
}

// border冒号后面要加空格，不然会报错，说border：后的css无效

导入SASS文件

css和sass区别

1. css导入的css文件是在执行到@important的时候，浏览器才会去下载其他的css文件，这导致页面加载速度比较慢

sass导入样式是在生成css文件时候就把相关的文件导入进来，这样就相关与把所有的样式文件整个到一个css中，无法