SCSS常用语法

原创已于 2024-05-24 14:58:20 修改 · 873 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#SCSS #for #each #循环

于 2020-07-22 09:51:59 首次发布

scss 同时被 2 个专栏收录

2 篇文章

订阅专栏

sass

1 篇文章

订阅专栏

本文深入探讨SCSS的高级语法特性，包括变量、嵌套、属性嵌套、&语法、继承扩展、逻辑语法如for循环和each循环，以及mixin、include、函数和条件语句的使用。通过实例讲解如何利用SCSS提升CSS的编写效率。

基本语法

变量

$color: red;
div {
  color: $color;
}

嵌套

div {
  p {
    font-size: 12px;
  }
}

属性嵌套

div{
  font:{
    size: 16px;
    weight:400;
    family:sans-serif;
  }
  border:2px solid #999{
    left:4px;
    right:4px;
  }
}

&语法

a {
  &:active{
    color: #000;
  }
}

继承扩展extend

%color {
  color: red;
}

.test2 {
  width: 100px;
  height: 10px;
  @extend %color;
}

导入import

index.scss

@import 'test.scss'

逻辑语法

for循环

$colors: 
	(key: default, value: gray),
    (key: red, value: red),
    (key: orange, value: orange),
    (key: yellow, value: yellow),
    (key: cyan, value: cyan),
    (key: blue, value: blue),
    (key: purple, value: purple);

@mixin color($key, $val) {
    .color-#{$key} {
        color: $val;
    }
}

@for $i from 1 through length($colors) {
    $item: nth($colors, $i);
    @include color(map-get($item, key), map-get($item, value));
}

each循环

$colors: 
	(key: default, value: gray),
    (key: red, value: red),
    (key: orange, value: orange),
    (key: yellow, value: yellow),
    (key: cyan, value: cyan),
    (key: blue, value: blue),
    (key: purple, value: purple);

@mixin color($key, $val) {
    .color-#{$key} {
        color: $val;
    }
}

@each $item in $colors {
    @include color(map-get($item, key), map-get($item, value));
    
    //$i: index($colors, $item); //获取下标
}

mixin与include

基础

@mixin red {
  color:red;
}
.mixin1 {
  @include red();
}

函数

@mixin color($color) {
  color: $color;
}
.mixin2 {
  @include color(blue);
}

条件

@mixin option($option) {
  @if $option==1 {
    color: yellow;
  }
  @else if $option==2 {
    color: green;
  }
  @else {
    color: black;
  }
}
.mixin3 {
  @include option(2);
}

函数

scss自带函数

.div1{
  width: max(10px,20px,40px);
}
.div2{
  height: min(10px,20px,40px);
}
.div3{
  height: ceil(10.1px);
}
.div4{
  height: floor(10.1px);
}

自定义函数

@function addWidth($width1,$width2){
  @return $width1+$width2;
}
div{
  width:addWidth(100px,20px);
}

差值语句

语法：#{}

$height:10px;
$name:height;
/*
 * @author:#{$name}
 */
.div-#{$name}{
  #{$name}: #{$height};
};

基于scss的bem方法的实现

https://segmentfault.com/a/1190000020655133