Scss小结

简介

整理了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的预处理器,scsssass3版本中引入的新语法特性。

简言之可以理解scsssass的一个升级版本,完全兼容sass之前的功能,又有了些新增能力。
语法形式上有些许不同,最主要的就是sass是靠缩进表示嵌套关系,scss是花括号

  • sass代码如下
.test-wrapper width: 100px; height: 100px; .test color: red;
  • scss代码如下
.test-wrapper { width: 100px; height: 100px; .test { color: red; } }

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: