简介
整理了scss
使用过程中,常用的语法等
安装
sass
解析需要使用模块:sass
;
- 新建目录,下载
sass
mkdir scss npm init -y npm i sass
- 新建
style.scss
文件
touch style.scss
- 修改package.json文件,添加
build
命令
{
// ...
"scripts": {
// ...
"build": "scss style.scss resStyle.css"
},
// ...
}
- 修改的
style.scss
文件,需要编译时,运行npm run build
引用外部文件 @import
@import "@/themes/variables.scss";
@import "./colors.scss";
@import "~taro-ui/dist/style/components/icon.scss";
变量
-
使用
$
声明一个变量 -
重复赋值时,后赋值的会替换先赋值的
-
可以在变量后面加
!default
兜底。如果该变量之前没有赋值过,会赋予新的值 -
如果变量需要镶嵌到字符串中,需要写在
#{}
中 -
示例代码
$primary-color: #ffaf53;
$primary-color: #207BE4; // 前面有定义的$primary-color,会覆盖,使用新值 #207BE4
$primary-color: #00A588 !default; // 前面有定义的$primary-color,不覆盖,继续使用原来的值
$position: top;
.test {
color: $primary-color; // 变量使用
.border_#{$position} { // 字符串中,通过 #{} 使用变量
border-#{$position}: 1px solid $primary-color;
}
&::after { // 嵌套代码中,使用 & 引用父元素
content: '*';
color: green;
}
}
- 编译后代码
.test {
color: #207BE4;
}
.test .border_top {
border-top: 1px solid #207BE4;
}
.test::after {
content: "*";
color: green;
}
Maps
Maps
可视为键值对的集合
map-get
函数用于查找键值,
map-merge
函数用于map
和新加的键值融合,
@each
命令可添加样式到一个map
中的每个键值对。
Maps
可用于任何Lists
可用的地方,在List
函数中 Map
会被自动转换为List
$theme-mutual: (
primaryColor: #ffaf53,
bgColor: #f4f4f4,
fontSize: 32px,
borderRadius: 4px,
);
@function getThemed($theme, $key) {
@return map-get($theme, $key);
}
@mixin commonTheme($theme) {
.test {
color: getThemed($theme, primaryColor);
}
}
.mutual {
@include commonTheme($theme-mutual);
}
// 编译后
// .mutual .test {
// color: #ffaf53;
// }
运算符
所有数据类型均支持相等运算 ==
或 !=
数字支持加减乘除、取整等运算 (+, -, *, /, %)
,如果必要会在不同单位间转换值。
关系运算 <, >, <=, >=
也可用于数字运算
布尔型支持 and
or
以及 not
运算。
+
可用于连接字符串
语句
条件语句 @if
$position: top;
.test {
position: absolute;
left: 0;
right: 0;
@if $position=="top" {
top: 0;
} @else if $position=="bottom" {
bottom: 0;
} @else {
top: 0;
bottom: 0;
}
$index: 5;
@if $index > 3 {
color: red;
} @else {
color: green;
}
}
循环语句 @for
@for $i from <start> through <end> // through: 包括 end 这个数
@for $i from <start> to <end> // to: 不包括 end 这个数
// <start> 和 <end> 必须是整数值
- 示例代码
@for $i from 1 to 5 {
.hr_#{$i * 5} {
display: block;
width: 100%;
height: ($i * 5) + px;
clear: both;
}
}
循环语句 @each
@function addUnit($v, $unit: px) {
@return $v+$unit;
}
$widthList: 24, 50, 100;
@each $w in $widthList {
.w_#{$w} {
width: addUnit($w, px);
}
.h_#{$w} {
height: addUnit($w, px);
}
.wh_#{$w} {
width: addUnit($w, px);
height: addUnit($w, px);
}
@each $h in $widthList {
@if $w != $h {
.wh_#{$w}_#{$h} {
width: addUnit($w, px);
height: addUnit($h, px);
}
}
}
}
循环语句 @while
$i: 1;
@while $i < 6 {
.hr_#{$i * 5} {
display: block;
width: 100%;
height: $i * 5 + px;
clear: both;
}
$i: $i + 2;
}
函数 @function
// 定义方法,可以设置默认值 $unit: px
@function addUnit($v, $unit: px) {
@return $v+$unit;
}
$width: 50;
$borderRadius: 4;
.test {
width: addUnit($width, px);
height: addUnit($width); // 有默认值的可以省略
border-radius: addUnit($unit: px, $v: $borderRadius); // 可以指定传入的变量,这时候顺序无所谓了
}
继承 @extend
SCSS
允许一个选择器,继承另一个选择器。使用@extend
.test {
color: red;
}
.test2 {
width: 100px;
height: 200px;
@extend .test;
}
// 编译后
// .test, .test2 {
// color: red;
// }
// .test2 {
// width: 100px;
// height: 200px;
// }
.test {
color: red;
.content {
color: green;
}
}
.test2 {
width: 100px;
height: 200px;
@extend .content;
}
// 编译后
// .test {
// color: red;
// }
// .test .content, .test .test2 {
// color: green;
// }
// .test2 {
// width: 100px;
// height: 200px;
// }
混入 @mixin、@include
使用@mixin
定义代码块,使用@include
调用mixin
@mixin ellipsis($num: 1) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $num;
-webkit-box-orient: vertical;
}
.test {
color: green;
@include ellipsis(2);
}
SASS vs SCSS
sass
就是css
的预处理器,scss
是sass3
版本中引入的新语法特性。
简言之可以理解scss
是sass
的一个升级版本,完全兼容sass
之前的功能,又有了些新增能力。
语法形式上有些许不同,最主要的就是sass
是靠缩进表示嵌套关系,scss
是花括号
sass
代码如下
.test-wrapper
width: 100px;
height: 100px;
.test
color: red;
scss
代码如下
.test-wrapper {
width: 100px;
height: 100px;
.test {
color: red;
}
}
发表评论