sass概述
sass是一个预编译的css语言，它是使用ruby语言写的，和它一样的预编译语言还有less，它是使用js写的。sass的环境之前是ruby环境，但是由ruby并了python，所以它可以运行在python环境上，这个些内容并不能直接使用，因为它属于预编译css，没有进行编译是不能被使用的。编译完还是css，那么我们知道它有个编译过程并比损耗效率，那么它的优势在哪？
预编译css的优势就是它可以减少你的css代码的书写量，并编译出对应的简洁的css代码。
常用的预编译css
sass （底层采用ruby书写）循环可以支持所有类型
less （底层采用js书写） 循环只支持数值类型
stylus （底层采用的是js （功能单一) 它是以缩进来区分对应的层级）
sass的常用俩种形式
sass 后缀 （以缩进来做为区分 没有{} ;）
scss 后缀 （类似于css的区分）
sass的编译环境
node支持python 运用node环境来运行sass
安装
npm install sass -g
编译
sass 需要编译的文件 编译后的文件
监听编译
sass --wacth 需要编译的文件:编译后的文件
vscode的插件来帮助我们编译sass
easy sass 扩展
扩展设置
保存后自动编译
live sass 扩展
sass入门
变量定义 使用$进行变量定义（*）
$color:red;
div{
background-color:$color;
}
div {
background-color: red;
}
选择器嵌套 使用&表示当前选择器（*）
div{
background-color:$color;
a,b{
text-align: center;
}
&:hover{
color: $color;
}
}
div a, div b {
text-align: center;
}
div:hover {
color: red;
}
样式嵌套
span{
border: 1px solid #ccc {
bottom: none;
};
}
div span {
border: 1px solid #ccc;
border-bottom: none;
}
支持运算符 + - * / %
$size:10px;
p{
font-size: $size * 5 / 10 + 20 % 1;
}
#box{
font-size: 10px + 10;
}
p {
font-size: 5px;
}
#box {
font-size: 20px;
}
支持if else判断
#content{
@if $size>5 {font-size: $size - 5;}
@if $size - 5>5 {color:red}
@else if $size - 5<5{color:blue}
@else {color:green}
}
#content {
font-size: 5px;
color: green;
}
支持for循环 （插值表达式 #{}）
//普通for循环
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//for each循环
$list : 1,2,3,4,5;
@each $var in $list {
.icon-#{$var}{
font-size:$var * 5px ;
}
}
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
.icon-1 {
font-size: 5px;
}
.icon-2 {
font-size: 10px;
}
.icon-3 {
font-size: 15px;
}
.icon-4 {
font-size: 20px;
}
.icon-5 {
font-size: 25px;
}
支持while循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
.while-6 {
width: 12em;
}
.while-4 {
width: 8em;
}
.while-2 {
width: 4em;
}
注释 /**/ 多行注释 // 单行注释
// 不会编译到css文件 /**/会编译到css文件
混入器 mixin （*）
//混入器
@mixin borderStyle {
border: 1px solid red;
}
.box{
@include borderStyle()
}
//传参的混入器 支持默认参数的
@mixin borderStyle1($a:1px,$b:solid,$c:green) {
border: $a $b $c;
}
#box{
// @include borderStyle1(1px,solid,red)
@include borderStyle1(2px)
}
.box {
border: 1px solid red;
}
#box {
border: 2px solid green;
}
方法 返回值的形式
@function reduce($a){
@return $a+10;
}
#hello{
width: reduce(10px);
}
#hello {
width: 20px;
}
继承 extend（复用 *）
#hi{
//继承hello的内容
@extend #hello;
height: 20px;
}
#hello, #hi {
width: 20px;
}
#hi {
height: 20px;
}
导入 （*）
@import './mixin.scss';
#box{
@include borderStyle1()
}
#box {
border: 1px solid green;
}
gulp
gulp是一个自动化构建工具（构建环境 将代码打包 基于文件流的形式） （outer了），webpack --- vite。
都是基于node环境运行的。用到模块来构建环境
npm install gulp -g
npm install webpack -g
npm insatll vite -g
标签：sass,width,color,编译,讲解,font,size From： https://www.cnblogs.com/bigBossKiss/p/16644639.html