scss使用注意点

scss拓展写法

.a {
    .b {
        &:hover {
            width: 100px;
        }
        &.c {
            width: 100px;
        }
        &-d {
            width: 100px;
            font: {
                size: 20px;
            }
        }
    }
}

转化为:

.a .b:hover {
  width: 100px;
}
.a .b.c {
  width: 100px;
}
.a .b-d {
  width: 100px;
  font-size: 20px;
}

// %base (占位符)用占位符防止.button编译 
.button%base {
    color: #333;
}

.btn-success {
    @extend %base;
    background-color: green;
}
.btn-error {
    @extend %base;
    background-color: red;
}

转化为:

.button.btn-error, .button.btn-success {
  color: #333;
}

.btn-success {
  background-color: green;
}

.btn-error {
  background-color: red;
}

scss变量

css变量使用

:root {
    --color: #333;
}

body {
    --border-color: #000;
}

.header {
    --background-color: #f2f2f2;
    --font-color: #f00;
    width: 100vw;
    height: 100px;
    background-color: var(--background-color);
}
span {
    color: var(--font-color); // .header中的span生效, 不在header中的span标签不生效
}

scss变量

$color: #fff; // scss变量以$开头
$border_color: #f00;
$border-color: #ccc; // 注意scss变量对中划线和下划线不敏感, 下面的覆盖上面的

.a {
    color: $color;
    border-color: $border_color;
}

转化为:

.a {
  color: #fff;
  border-color: #ccc;
}

scss变量同样存在作用域
但是

$color: null;
.a {
    $color: red !global; // 可以通过!global提升为全局变量, 虽然可以编译成功, 但是编译器会报错As of Dart Sass 2.0.0, !global assignments won't be able to declare new variables. 需要在根节点声明$color: null;才能解决报错信息
}

.b {
    color: $color;
}

转化为:

.b {
  color: red;
}

// scss变量的数据类型:
// 1. 可以是任何css属性值;
// 2. 也可以是boolean/null用于判断
// 3. 可以是逗号分隔的list
// 4. 可以是小括号包裹的key:value的类似于map的集合
$layer-index: 10;
$border-width: 3px;
$font-base-family: 'Open Sans', Helvetica, Sans-Serif;
$top-bg-color: rgba(255, 147, 29, .6);
$block-base-padding: 6px 10px 0 10px;
$block-mode: true;
$var: null;
$color-map: (color1: #f00, color2: #ff0, color: #0ff);
$fonts: (serif: 'Helvetica Neue', monospace: 'Consolas');
$font-size: null;
.container {
    @if $block-mode {
        background-color: #000;
        $var: 'hahaha'
    }@else {
        background-color: #fff;
        $var: 'heiheihei'
    }

    content: type-of($var);
    content: length($var);
    color: map-get($color-map, color2);
}

.wrap {
    font: 10px blod map-get($map: $fonts, $key: 'sans'); // map-get如果找不到对应key值会返回空值
}

转化为:

.container {
  background-color: #000;
  content: null;
  content: 1;
  color: #ff0;
}

.wrap {
  font: 10px blod;
}

$color: #333;

$color: #666 !default;

p {
    color: $color;
}

转化为:

p {
  color: #333;
}

scss中使用css变量

$color: #333;

:root {
    --color: #{$color}; // 注意不能直接使用$color, 需要用插值语法
}

导入

css导入

@import url(a.css);

scss导入

@import 'public.scss'; // 可以正确导入scss模块
@import 'public'; // 可以正确导入scss模块
@import url(public.scss); // 不会编译, 作为普通css语法
@import 'public.css'; // 不会编译, 作为普通css语法
@import 'https://xxx.com/xxx'; // 不会编译, 作为普通css语法
@import 'landscape' screen and (orientation: landscape); // 不会编译, 作为普通css语法

如果一个scss文件不想被编译可以用下划线开头定义文件名

混入

@mixin block {
    .a {
        width: 96%;
        margin-left: 2%;
        border-radius: 10px;
        border: 1px solid #333;
    }
}

.container {
    @include block;
}

转化为:

.container .a {
  width: 96%;
  margin-left: 2%;
  border-radius: 10px;
  border: 1px solid #333;
}

// 参数可以指定默认值
@mixin block-padding($top: 0, $right: 0, $bottom: 0, $left: 0) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

.container {
    // 可以按顺序传参
    // @include block-padding(10px, 20px, 30px, 40px);
    // 也可以指定参数名传参
    @include block-padding($left: 40px, $right: 20px, $top: 10px, $bottom: 30px);
}

转化为:

.container {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

@mixin linear-gradient($direction, $gradients...) {
    background-color: nth($list: $gradients, $n: 1); // 获取一个$list的$n位(不是从0开始)
    background-image: linear-gradient($direction, $gradients);
}

.container {
    @include linear-gradient(to top, #f00, #0f0, #00f);
}

转化为:

.container {
  background-color: #f00;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#f00), color-stop(#0f0), to(#00f));
  background-image: linear-gradient(to top, #f00, #0f0, #00f);
}

继承

.alert {
    width: 100%;
}

.alert-info {
    @extend .alert;
    background-color: #f2f2f2;
}

.alert-success {
    @extend .alert;
    background-color: green;
}

转化成:

// 如果不想成成.alert类的样式, 只是用于集成的话, 可以在scss中将.alert换成%alert占位符
.alert, .alert-success, .alert-info {
  width: 100%;
}

.alert-info {
  background-color: #f2f2f2;
}

.alert-success {
  background-color: green;
}

继承和混入的区别

继承和混入都能将一段样式代码引入到另一段代码中, 但是@mixin会将这段代码复制到所有@include处, 而@extend过来的代码, 会将所有@extend的类集合起来写, 虽然效果一样, 但是用@extend得到的目标代码更少, 更精简.

主要来说两者用法不一样

• 混入的话意图在于样式代码的复用
• 继承的话意图在于在一个选择器中使用另一个选择器的样式

运算符

==        等于
!=        不等于
>        大于
<        小于
>=        大于等于
<=        小于等于
and        且
or        或
not     非
+        加 / 字符串连接
-        减
*        乘
/        除
%        取余

// 加减乘除应用于数字类型的数据操作, 在scss中 1 1px 1pt 1vw 1%都是数字类型, 有多种单位的数字, 所以就很恶心, 用之前试一试吧, 大部分编译结果还是可以常理预测的, 但是也有特殊的
.container {
    width: 10 + 20;
    width: 30 + 40%;  // 如果一个数字和带单位的数据加, 那么数字会默认加上对应单位
    width: 50% + 60;
    width: 70% + 80%;
    width: 90 + 100px;
    width: 110px + 120;
    width: 130px + 140px;
    // width: 20px + 10%;  报错, 两个不同单位相加减会报错, 这种应该用css的calc函数
    width: calc(150px + 160%);

    width: 10 * 20;
    width: 5 * 10%;
    // width: 50% * 10%; // 报错
    // width: 10px * 50px; 报错
    width: 2 * 10px;

    width: 10 / 5; // 不会计算(三种情况会走计算逻辑1. 值或值得一部分是变量或函数返回值; 2. 值被小括号包裹; 3. 值是算数表达式的一部分)
    $width: 1000px;
    .div {
        width: $width / 2;
        width: $width / 2px;
        z-index: round($number: 10) / 2;
        height: (500px / 2);
        height: (500px / 2px);
        // height: (500 / 2px); // 报错
        height: (500 / 2);
    }

    .span {
        width: 10 % 3;
        width: 50 % 3px;
        width: 50px % 3px;;
    }
}

转换成:

.container {
  width: 30;
  width: 70%;
  width: 110%;
  width: 150%;
  width: 190px;
  width: 230px;
  width: 270px;
  width: calc(150px + 160%);
  width: 200;
  width: 50%;
  width: 20px;
  width: 10/5;
}
.container .div {
  width: 500px;
  width: 500;
  z-index: 5;
  height: 250px;
  height: 250;
  height: 250;
}
.container .span {
  width: 1;
  width: 2px;
  width: 2px;
}

插值语法#{}

$class-name: danger;
$attr: color;
$author: 'wjt';

/*
@author: #{$author}
*/
a.#{$class-name} {
    border-#{$attr}: #f00;
}

转换为:

/*
@author: wjt
*/
a.danger {
  border-color: #f00;
}

常用函数

颜色相关lighten/darken/opacify

p {
    height: 30px;
}
$bgc: #5c7a29;
.p0 {
    background-color: $bgc;
}
.p1 {
    background-color: lighten($color: $bgc, $amount: 30%);
}
.p2 {
    background-color: darken($color: $bgc, $amount: 15%);
}
.p3 {
    background-color: opacify($color: $bgc, $amount: .5);
}
.p4 {
    background-color: opacify($color: rgba($bgc, .1), $amount: .5);
}

转换为:

p {
  height: 30px;
}

.p0 {
  background-color: #5c7a29;
}

.p1 {
  background-color: #aace6e;
}

.p2 {
  background-color: #314116;
}

.p3 {
  background-color: #5c7a29;
}

.p4 {
  background-color: rgba(92, 122, 41, 0.6);
}

p {
    &:after {
        content: quote($string: aaa);
    }
    background-color: unquote($string: "#f00");
    z-index: str-length($string: "aaa")
}

转换为:

p {
  background-color: #f00;
  z-index: 3;
}
p:after {
  content: "aaa";
}

p {
    z-index: abs($number: -15);
    z-index: ceil($number: 4.2);
    z-index: max(5, 1, 5, 8, 3);
    opacity: random();
}

转换为:

p {
  z-index: 15;
  z-index: 5;
  z-index: 8;
  opacity: 0.3833696362;
}