英文网站建设深圳,可信赖的大良网站建设,抖音营销推广方案,网络设计需求分析1#xff0c;import
sass扩展了import导入#xff0c;对于css#xff0c;import导入在页面加载的时候去下载导入的外部文件#xff0c;而sass的导入#xff0c;在编译成css文件的时候就将外部的sass文件导入合并编译成一个css文件。
他支持同时导入多个文件#xff1b;…1import
sass扩展了import导入对于cssimport导入在页面加载的时候去下载导入的外部文件而sass的导入在编译成css文件的时候就将外部的sass文件导入合并编译成一个css文件。
他支持同时导入多个文件支持在嵌套样式中导入文件。
// 顶部导入文件
style langscssimport ./common.scss;import ./mixin.scss, ./index.scss; // 导入多个文件
/style//card.scss文件
div {border-radius: 6px;
}
// 嵌套中导入文件
.card {import ./card.scss;
}// 编译后为
.card div {border-radius: 6px;
} 2media
sass中的media与css中的作用一样只是sass中支持在嵌套中使用。
.menu {width: 300px;media screen and (orientation: landscape) {width: 400px;}
} 3if、else if、else
逻辑控制与js中的if、else语法用法一致。可以配合sass中的not、and、or等字符使用
$width: 100px;if $width 100px {border-color: blue;
} else {border-color: #F3F3F3;
}if $height 2 {margin: 20px;
} 4for
for循环用来迭代限制循环的次数。不同于js的是索引从1开始。
语法1for $i from start to end不包含最后end的值
语法2for $i from start through end包含最后end的值
// 循环3次
for $i from 1 through 3 {.list-#{$1} {width: 10px;}
}// 编译后
.list-1 {width: 10px;
}
.list-2 {width: 10px;
}
.list-3 {width: 10px;
} 5each
类似于js中的foreach。sass中的each用来遍历list或者map。
语法each $var in list
$widths: 2px 3px 4px; // 数组each $item in $widths {.wd-#{$item} {width: $item;}
}// 编译后
.wd-2px {width: 2px;
}
.wd-3px {width: 3px;
}
.wd-4px {width: 4px;
} 6while
与js的while循环类似。很少使用
$i: 3;while $i 1 {.item-#{$i} {height: $i px;}$i: $i - 1; // 在这里重新赋值
}// 编译后
.item-3 {height: 3px;
}
.item-2 {height: 2px;
}
.item-1 {height: 1px;
} 7function
函数与mixin类似也支持可变参数与默认值。用法与js中基本类似也支持return返回值。
语法function name(arguments...)
function add($param1, $baseNo: 10px) {$result: $param1 $baseNo;return $result;
} 8use
与important作用一样导入外部文件但是use还有额外的作用在引入时用as关键字定义定义命名空间并可以通过命名空间调用外部文件的样式
use ./common.scss as common; // 定义命名空间commondiv {include common.scrollbar; // 通过命名空间属性调用外部样式
} 9at-root
将嵌套中的样式置顶到根部脱离嵌套的样式层级。
.main {at-root .header { // 将header选择器置顶height: 40px;}.body {height: 1000px;}
}// 编译后
.header {height: 40px;
}
.main {.body {height: 1000px;}
} 10debug、error、warn
sass中的debug、error、warn用来打印一些信息分别和js中的console.log()、console.error()、console.warn()类似。
if $width 100 {padding-top: 20px;
} else {warn 宽度输入过大;
} 11extend和占位符选择器%
已了解到extend是用来继承样式的。而占位符选择器placeholder selector是sass提供的新选择器。定义方式与ID选择器、class选择器类似只是标识符是%。但是他只能通过extend引用。
他的特点是如果只定义但是没引用是不会编译到css文件中的
// 定义占位符选择器
%eclipse {text-overflow: ellipsis;overflow: hidden;white-space: no-wrap;
}// 引用
.main {extend %eclipse;
} 12其他规则
还有一些其他常用规则例如mixin、include等
