scss用法总结

scss用法总结

1. scss和css比较

• SCSS 更具表现力——SCSS 在其代码中使用的行数比 CSS 少，这使得代码加载速度更快。

• 它鼓励规则的正确嵌套——标准 CSS 不支持嵌套。我们不能在另一个类中编写一个类。随着项目变得越来越大，这带来了可读性问题，并且结构看起来不太好。

2. scss常用语法

2.1 嵌套

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

编译为

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
    background-color: #ff0000;
    color: #000000; 
}

2.2 父选择器

.home{
    &-title{
        background:red;
    }
     &-content{
        background:black;
    }
      &-footer{
        background:green;
    }
}

编译为

.home-title{
     background:red;
}
.home-content{
     background:red;
}
.home-footer{
     background:red;
}

2.3 变量

scss定义变量很简单就是加个$,可以写在{} 内也可以不写，代表着全局变量和局部变量

$width:5px;
.main{
    $heigth：10px;
    width:$width;
    .child{
        heigth:heigth;
        width:$width;
	}
}

2.4 插值语句

#{} 代表的插值

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

2.5 运算和数据类型

scss支持js的运算，

数字运算， +, -, *, /, %

关系运算 <, >, <=, >= ==, !=

布尔运算 and or not，

数组 用空格逗号隔开都可以称为数组 1 2 或者 1,2 ( )代表空数组

字符串，有引号字符串与无引号字符串，“foo”, ‘bar’, baz

数字，1, 2, 13, 10px

maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

$social-colors: (
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
//假设要获取 facebook 键值对应的值 #3b5998，我们就可以使用 map-get() 函数来实现：

.btn-dribble{
  color: map-get($social-colors,facebook);
}

编译后

.btn-dribble {
  color: #3b5998;
}

2.6 导入scss @import

@import "foo.scss";

2.7 继承样式 @extend

当下面的样式和上面样式完全相同，可以用@extend直接继承上面的样式，同时在编译的时候，scss会在合并样式的时候，避免重复的css

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

对于伪类只能继承一层，但是可以延展给选择器列

#fake-links .link { //延展给所有选择器
  @extend a;
}

a {
  color: blue;//只能继承到一层
  &:hover {  //这里不会被继承
    text-decoration: underline;
  }
}

编译为

a, #fake-links .link {
  	color: blue; 
}

a:hover, #fake-links .link:hover {
    text-decoration: underline; 
}

多层是可以继承的

示例 如下 可以知道@extend是可以多个使用，同时可以继承嵌套的scss，但是有个问题，如果嵌套中使用了父选择器

那么最外层，下面必须存在css样式不然会报错

.large-text {
     .title {
        color: blue;
        background-color: red;
     }
}

// 使用
div {
 @extend .large-text;
 @extend .a;
  padding: 4px;
  margin-top: 10px;
}
.a {
  font-size: 16px; //这里必须有css，不然会找不到.a
  &-hover {    //这里不会被继承
    color: blue
  }
}

3. 常用的指令

3.1 @each

@each $var in(left,center,right){
    .text-#{$var}{
		text-align:$var;
    }
}

3.2 @mixin 和 @include

用处类似于extend，区别在于mixin是可以传递参数
这2个是对应关系，一个定义混合样式，一个使用

示例1

@mixin large-text {
  font: { //scss允许这种写法，但是基本不咋用
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
     a {
    color: blue;
    background-color: red;
  }
}

//使用
page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译后

.page-title {
       a {
    color: blue;
    background-color: red;
  }
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

示例2 函数写法

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

//第二种写法
@mixin sexy-border($color, $width: 1in) { //可以给与默认值，
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); } // 当不传递的时候默认第二个值
h1 { @include sexy-border($color: blue, $width: 2in); } // 也可以添加关键词，这样顺序可以打乱

sass文档
参考文档：
原文链接：https://blog.csdn.net/marendu/article/details/108603221
原文链接：https://blog.csdn.net/ly1477868382/article/details/128189374