美文网首页
SCSS 基础语法

SCSS 基础语法

作者: 养乐多__ | 来源:发表于2019-11-11 10:05 被阅读0次

1. 选择器扩展

1. BEM 命名法(CSS 命名)

BEM 全称为 Block Element Modifier
比如要给一个模块取名字,步骤如下:
1. 先确定模块的名字,如 user-card
2. 这一模块的子代或后代元素都围绕这个名字来命名,用两个下划线连接。如模块里面的头像用 .user-card__picture,名字用 .user-card__name,简介用 .user-card__description
3. 当某个元素发生状态的变化,如 hover 或 click 时样式改变,命名时用两个中划线连接。如 .user-card--active.user-card__picture--active

虽然 BEM 命名法逻辑清晰,且各模块名字之间不会相互影响,但名字比较冗长,实际开发中我们可以根据这个思想改的简洁一些,例如将 .user-card__picture--active 改写成 .userCard-picture .activeclass="userCard-picture active")。

2. 嵌套选择器

<div class="userCard active">
    <div class="userCard-name"></div>
</div>
.userCard{
    width: 100px;
    .userCard-name{
        color: block;
    }
}
// 编译后的 CSS
.userCard{
    width: 100px; }
    .userCard-name{
        color: block; }

3. & 符号

.userCard{
    width: 100px;
    &.active{
        background: orange;
    }
    &-name{
        color: block;
    }
}

4. 嵌套属性

.userCard{
    width: 100px;
    font: {
        size: 20px;
        weight: bold;
        family: 'Courier New',Courier,monospace;
    }
}

2. 注释

CSS 只能 /*单行注释*/,SCSS 可以支持 // 单行注释
如果多行注释的第一个字母是 !,那么注释总是会被保留到输出的 CSS 中。

3. 变量

变量可以在多个选择器里引用同一个数值,方便批量修改。

.userCard{
    width: 100px;
    &-name{
        $width: 120px;
        width: $width;
        height: $width;
    }
}

变量是有作用域的。
可以使用 !global 强行变为全局变量(不推荐使用)
如果定义一个变量名为 $main-width,也可以使用 $main_width访问它。

4. 运算

  1. SCSS 支持数字的加减乘除(除法特殊),取模运算(判断奇偶)
div{
    width: 100px + 100px + 100px; // 加
    width: 100px * 100; // 乘
    width: (100px/2); // 除
    width: $width/2; // 除
    width: 100px/2-0; // 除
    width: 101px % 2; // 取模运算,值为1,奇数
    width: 100px % 2; // 取模运算,值为0,偶数
}

/ 解析为除法的三种情况:

  • 如果该值,或值的任何部分,存储在一个变量中或通过函数返回。
  • 如果该值是由括号括起来的,除非这些括号是在一个列表(list)外部,并且值是括号内部。
  • 如果该值被用作另一个算术表达式的一部分。
  1. 颜色相关运算
div{
    $red: #FF0000;
    color: $red + #888888;
}
// 运算之后的值为:
div{
    color:  #FF8888;
}
  • 除此之外,SCSS 还提供了很多操作颜色的函数,可以对颜色进行任何操作,如:
div{
    $red: #FF0000;
    background: fade-out($red, 0.5); // 更改透明度
    color: change-color($color:$red, $green:255); // 更改颜色
}
  1. 字符串插值
    SCSS 支持在代码里插入字符串或变量(#{}),如在某个元素的开头和结尾各加一个符号,并插入变量:
div{
    $red: #FF0000;
    &::before{
        content: '* #{$red}';
    }
    &::after{
        content: '?';
    }
}
  1. CSS 语法也支持运算:
div{
    width: calc(200px / 2);
}

相关文章

  • SCSS 基础语法

    1. 选择器扩展 1. BEM 命名法(CSS 命名) BEM 全称为 Block Element Modifi...

  • scss基础语法

    一、变量以 $ 开头 二、&、#{}(类似与js的模版字符串的变量写法#{$font-size}) 以下写法会被翻...

  • SASS基础篇

    sass的两种语法 .sass 类似ruby的语法.scss 熟悉的类css语法 css文件改为scss文件只用直...

  • SCSS理解

    SCSS是一款强化CSS的辅助工具,它在语法的基础上增加了变量,嵌套,混合,导入等高级功能 SCSS嵌套功能 SC...

  • Scss 在项目中的使用

    1、在使用 Scss 之前,我们要知道 Sass、Scss 有什么不同? Scss 是 Sass 3 引入新的语法...

  • SCSS

    scss语法scss常见用法阮一峰 sass语法 变量 $ 定义 嵌套引用 多值变量 变量计算 定义 嵌套引用,特...

  • SCSS实用指南

    开始前先说下 SCSS 和 SASS 的区别:SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,...

  • scss

    css的预处理语言:scss(sass的进阶版,扩展名不同,严格缩进式语法。scss 语法同css) less s...

  • scss语法

    1. 变量声明-引用 命名类名使用中线-分割! 使用 $ 声明变量: 2. 嵌套css 3. 父选择器& 使用 ...

  • SCSS语法

    嵌套规则 引用父选择器 & 嵌套属性规则 运算 声明变量 数学运算 特殊的 / 除法运算符 scss为了兼容IE8...

网友评论

      本文标题:SCSS 基础语法

      本文链接:https://www.haomeiwen.com/subject/aigzbctx.html