scss 常用语法整理速查表

2021-2-19 Jon html+css

vscode 中实时 scss 转 css

vscode 中搜索并安装插件 Live Sass Compiler
在设置中搜索 Live Sass Compiler 配置如下。

"liveSassCompile.settings.formats": [
  {
    "format" : "expanded" ,
    "extensionName" : ".css" ,
    "savePath" : null
  }
]

更多配置自行搜索 Live Sass Compiler
使用
ctrl+shift+P 键入Live Sass: Watch Sass 以开始实时编译，
键入 Live Sass: Stop Watching Sass 以停止实时编译。

常用语法

变量

$main-color: red;
div {
  $this-color: blue;
  color: $this-color;
  background: $main-color;
}
// 编译后 css
div {
  color: blue;
  background: red;
}

注意
变量声明以 $ 开头如 $a
变量中下划线和中线可以互换兼容$a_b === $a-b
变量定义后可以修改 $a = red; $a = blue;
变量存在作用域 {} 中声明的变量外部无法使用
变量值中可以存在变量如 $main-border: 1px solid $main-color;

嵌套规则

// 1. 普通嵌套
div { .header {} }
// 输出 div .header {} 
body { div,h1,h2 { } }
// 输出 body div,body h1,body h2 {}

// 2. 父选择器 &
div { 
  &.header {
    color: #fff
  } 
}
// 输出 div.header { color: #fff }
.header {
  &-txt {
    color: #fff;
  }
}
// 输出 .header-txt { color: #fff; }

// 3. 属性嵌套
div {
  font: {
    size: 10px; 
    weight: bold
  }
}
// 输出 div { font-size: 10px; font-weight: bold }

导入

// _header.scss
@import 'header';

注意
导入代码后面要加分号否则出错
被导入 scss 文件一般使用开头
导入 scss 文件可省略后缀和前面
导入 scss 不会产生 http 请求
导入 scss 嵌套中也可使用
导入 css 必须写后缀
导入 css 会产生 http 请求
导入 css 会自动提到文件开头

注释

scss
/* 多行注释 */
// 单行注释
css
/* 多行注释 */

注意
注释分为多行注释和单行注释
多行注释会被保留在输出的CSS中
而单行注释又叫静默注释不会出现在生成的css文件中

通用代码混合器、继承和占位符

/* 
  混合器 @mixin @include 
  使用 @mixin 标识符给一大段样式赋予一个名字name，这样你就可以通过 “@include name” 重用这段样式到任意地方。
*/ 
// 1. 普通用法
@mixin important-text {
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}
div {
  @include important-text;
}
header {
  span {
    @include important-text;
  }
}
// 生成 css
div {
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}
header span {
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}
// 2. 定义含参数的混合器
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
// 再样式规则中调用含参的混合器
a {
  @include link-colors(blue, red, green);
}
// 还可以通过语法$name: value的形式指定每个参数的值。
span {
  @include link-colors(
    $normal: blue,
    $visited: green,
    $hover: red
  );
}
// 生成 css
a {
  color: blue;
}
a:hover {
  color: red;
}
a:visited {
  color: green;
}
span {
  color: blue;
}
span:hover {
  color: red;
}
span:visited {
  color: green;
}

/* 
  继承 @extend 
  一个选择器的样式可以继承另一个选择器
  如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。
*/
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
// 生成 css
.error, .seriousError {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

/* 
  占位符 % 
  %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码
*/
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  @extend %mt5;
  @extend %pt5;
}
.block {
  @extend %mt5;
  span {
    @extend %pt5;
  }
}
// 生成 css
.btn, .block {
  margin-top: 5px;
}
.btn, .block span {
  padding-top: 5px;
}

注意
混合器 mixin 中可以嵌套其他样式可以传参数
继承 extend 不能继承嵌套不可传参数
占位符% 和继承很像只是不生成占位的源代码

Interpolation #{}

/* 
  Interpolation 可以说是 scss 中开挂般的存在
  可以通过 #{} 给属性和类名进行变量替换
*/
$prop1: border;
@mixin set-one($side, $val){
  #{$prop1}-#{$side}: $val;
}
.box-bor {
  @include set-one(width, 2px);
  @include set-one(style, dashed);
  @include set-one(color, green);
}
// 生成 css
.box-bor {
  border-width: 2px;
  border-style: dashed;
  border-color: green;
}
// 结合 @each
$prop2: padding, margin;
$name: 'name';
@mixin set-prop($side, $val) {
  @each $prop in $prop2{
    #{$prop}-#{$side}: $val;
  }
}
.box-#{$name} {
  @include set-prop(left, 16px);
}
// css
.box-name {
  padding-left: 16px;
  margin-left: 16px;
}

指令

条件控制指令：@if 条件{...}
循环控制指令：
@for $var from <开始值> through <结束值> -----------包括结束值
@for $var from <开始值> to <结束值> ------------不包括结束值
循环List项目的控制指令：@each $var in $List{}
条件判断循环：@while 条件{...}
警告和错误的提示：
@warn "..."------------------------在终端输出警告
@error "..."----------------在.css文件和终端输出错误

/* @if 指令 */
p {
  @if 10 + 10 == 20   { border: 1px dotted;   }
  @if 7 < 2     { border: 2px solid;  }
  @if null    { border: 3px double; }
}
// 生成 css
p {
  border: 1px dotted;
}
// scss
$type: audi;
p {
  @if $type == benz {
    color: red;
  } @else if $type == mahindra {
    color: blue;
  } @else if $type == audi {
    color: green;
  } @else {
    color: black;
  }
}
// 生成 css
p {
  color: green;
}

/* @for 指令 */
// scss
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
// 生成 css
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}
// scss
@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
// 生成 css
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}

/* @each 指令 */
@each $color in red, green, yellow, blue {
  .p_#{$color} {
    background-color: $color;
  }
}
// 生成 css
.p_red {
  background-color: red;
}
.p_green {
  background-color: green;
}
.p_yellow {
  background-color: yellow;
}
.p_blue {
  background-color: blue;
}
// scss
$list: (h1, aqua, dotted), (h2, red, solid), (h3, green, double);
@each $header, $color, $border in $list {
  $i: index($list, ($header, $color, $border));
  .#{$header}-#{$i} {
    background-color : $color;
    border: $border;
  }
}
// 生成 css
.h1-1 {
  background-color: aqua;
  border: dotted;
}
.h2-2 {
  background-color: red;
  border: solid;
}
.h3-3 {
  background-color: green;
  border: double;
}

运算

scss 中可以进行想 js 一样的运算。

$w1: 100px;
div {
  width: $w1 + 20;
  height: ($w1 * 2) - 40;
  line-height: (180px/30);
}
// 生成 css
div {
  width: 120px;
  height: 160px;
  line-height: 6px;
}

注意
运算建议带括号方便理解和维护
加减乘运算可以都带单位也可以只有一个带单位会保留单位
除法运算分子一定要带单位才能保留单位，只有分母带单位将报错
除法运算都带单位或都不带单位结果都不带单位
运算中两者都不带单位结果也不带单位

函数

数字函数
percentage($theNumber); // 将一个不带单位的数转换成百分比值； //450%
round($theNumber); // 将数值四舍五入，转换成一个最接近的整数； //5
ceil($theNumber); // 将大于自己的小数转换成下一位整数； //5
floor($theNumber); // 将一个数去除他的小数部分； //4
abs($theNumber); // 返回一个数的绝对值；//4.5
min($numbers…); // 找出几个数值之间的最小值； //min(1,2,3) =1
max($numbers…); // 找出几个数值之间的最大值； //max(1,2,3)=3
random();// 获取随机数 //随机数
用户自定义的函数：@function 名称(参数1，参数2...){...}

$theNumber: 4.5;
div {
  width: percentage($theNumber); // 将一个不带单位的数转换成百分比值；  //450%
}
// 生成css
div {
  width: 450%;
}

字符串函数：
to-upper-case($theString)：输出$theString的大写 //HELLO WORLD
to-lower-case($theString)：输出$theString的小写 //hello world
str-length($theString):输出$theString的长度 //11
str-index($theString,"Hello"):输出$theString第二个参数的开始索引 //1
str-insert($theString,".com",12):在索引为12的地方为$theString插入".com" //"Hello World.com"

$theString: "Hello World";
div::after {
  content: to-upper-case($theString);
}
// 生成css
div::after {
  content: "HELLO WORLD";
}

颜色函数

调整色相h的值
$base-color-hsl:hsl(0,100,50%); // red
$base-color:#ff0000; // red
adjust-hue($base-color-hsl,137deg); // #00ff48
adjust-hue($base-color,137deg); // #00ff48
调整亮度l的值
$base-color:hsl(222,100%,50%); //#004cff
$light-color:lighten($base-color,30%); //#99b8ff（变亮）
$dark-color:darken($base-color,20%); //#002e99（变暗）
调整饱和度s的值
$base-color:hsl(221,50%,50%); //#4068bf
$saturate-color:saturate($color:$base-color,$amount:50%); //#0051ff (更饱和)
$desaturate-color:desatudate($color:$base-color,$amount:30%); //667699 (更不饱和)
调整透明度a的值
$base-color:hsla(222,100%,50%,0.5); //rgba(0, 77, 255, 0.5)
$fade-in-color:opacify($color: $primary-color, $amount: 0.3); //rgba(0, 77, 255, 0.8)
$fase-out-color:transparentize($color: $primary-color, $amount: 0.2); //rgba(0, 77, 255, 0.3)

$base-color-hsl:hsl(0,100,50%);
div {
  color: adjust-hue($base-color-hsl,137deg);
}
// 生成css
div {
  color: #00ff48;
}

列表函数（1px solid black：这样称为一个列表有三个项）
length(5px 10px)：列表长度 //2
length(5px 10px 0px 2px) 列表长度 //4
nth(5px 10px,1)：列表第一项 //5px
nth(5px 10px,2)：列表第二项 //10px
index(1px solid red,solid)：列表solid的项目索引 //2
append(5px 10px,5px)：列表中插入项目 //5px 10px 5px
join(5px 10px,5px 10px):列表之间连接 //5px 10px 5px 10px
join(5px 10px,5px 10px,参数)：列表之间条件连接 //参数为comma=5px,10px,5px,10px ---------参数为space=5px 10px 5px 10px

$border: 1px solid black;
p {
  @if length($border) < 2 {
    color: red;
  } @else {
    color: blue;
  }
}
// 生成css
p {
  color: blue;
}

Map函数(Map为带有键值对的列表)
length($colors)：map的长度 //2
map-get($colors,dark):取得键值为dark的值 //#000000
map-keys($colors)：取得所有键 //("light","dark")
map-values($colors) ：取得所有值 //(#ffffff,#000000)
map-has-key($colors,light)：map是否有light键 //true
map-merge($colors,(color-red:#ff0000)) ：插入键值对到map //(light:#ffffff,dark:#000000,color-red:#ff0000)
map-remove($colors,light,dark) :从map删除键值对 // (color-red:#ff0000)

$colors:(light:#ffffff, dark:#000000);   //定义map
p {
  color: map-get($colors,dark);
}
// 生成css
p {
  color: #000000;
}

自定义函数
定义了很多函数可供使用，当然你也可以自己定义函数，以 @fuction 开始。

$width1: 10px;
$width2: 20px;
@function widthFn($n) {
  @return $n * $width2 + ($n - 1) * $width1;
}
div { 
	width: widthFn(5);
}
// 生成css
div {
  width: 140px;
}

标签: css scss

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇使用 json-server 两分钟搭建前端测试本地数据接口
上一篇js 汉字获取首字母，汉字转拼音

评论：

aTnyexIKhBpR
2023-11-16 02:24

QuasBFLOI

发表评论：

知向前端

scss 常用语法整理速查表

vscode 中实时 scss 转 css

常用语法

变量

嵌套规则

导入

注释

通用代码混合器、继承和占位符

Interpolation #{}

指令

运算

函数

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档