scss常用语法总结

ydlsl
1,001 阅读3分钟

scss和sass

  • SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法
  • SASS 使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性
  • 编译生成的 CSS 文件放置在 public/stylesheets 中

scss、sass写法区别

对sass不怎么用，列出是学到的
1、style区别：`<style lang='scss' scoped> <style lang='sass' scoped>` 
2、sass可以直接不同单位加减运算，但不是全部单位（目前%、vh、vw不行）
3、scss则不可以直接进行不同单位的加减运算，需要括号或者函数calc
4、颜色运算都没试成功
5、!important > 行内样式 > #id > .类名 > 标签名 > * > 继承 > 默认

scss常用符号

&符号

  • 嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器
例如，当给某个元素设定 `hover` 样式时
&就是父元素的别名
a {
    font-weight: bold;
    &:hover { 
         text-decoration: underline; 
    }
    body.firefox & { 
        font-weight: normal; 
    }
    &-sidebar { 
        border: 1px solid; 
    }
}
编译为：
a {
    font-weight: bold;
    text-decoration: none; 
}
a:hover {
    text-decoration: underline; 
}
body.firefox a {
    font-weight: normal; 
}
a-sidebar {
    border: 1px solid; 
}

属性嵌套

  • 有些 CSS 属性遵循相同的命名空间
例如，当给某个嵌套元素设定 `font` 样式时
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
编译为：
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

%符号

  • SassScript 的占位符，通过 @extend 指令调用，不能添加参数（@mixin）
例如，当给某个元素设定 css代码块
%box{
    box-shadow: 0 0 5px black;
    margin: 10px;
}
.smallBox{
    width: 300px;
    height: 300px;
    @extend %box;
}
编译成：
.smallBox{
    width: 300px;
    height: 300px;
    box-shadow: 0 0 5px black;
    margin: 10px;
}

$符号

  • SassScript 最普遍的用法就是变量，变量以美元符号开头
  • 变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量）
例如，当给某个元素设定 一个数值 时 （支持【数字、字符串、颜色、布尔、数组、maps】）
$width: 5em;
main {
  width: $width;
}
编译为：
main {
  width: 5em;
}

#符号

  • 最基本用法是标记id='qwe'的qwe的样式
  • 如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式使用
  • 类似于js的 ``${} 用法，运行时字符串
例如，当给某个元素设定 一个字符 时 
$borderDirection: qwe !default;
.border-#{$borderDirection} {
    border-#{$borderDirection}: 1px solid #ccc;
}
编译为：
.border-qwe { 
    border-top:1px solid #ccc; 
}

连写、逗号、空格、>

  • 连写 ：表示当前元素需要同时具备（class="a b"）才会出现效果
  • 逗号分隔：表示当前元素具备其中一个就会出现效果，即并列关系
  • 空格分隔：表示从属包含关系，是当前的元素子元素才会出现效果，即父子、父孙...关系

  • 号分割：表示直属关系，必须是父子关系才起作用

连写
例如，给定两个class 时, 同时满足两个class才会表现出对应的css
.one.two
{
    background-color:yellow;
}
使用时：
<div class="one two"></div>

逗号
例如，给定两个class 时 ，任意一个class都会表现
.one,.two
{
    background-color:yellow;
}
使用时：
<div class="one"></div>

空格
例如，给定两个class 时 ，同时满足且是从属关系
.one .two
{
    background-color:yellow;
}
>号
例如，给定两个class 时 ，同时满足且是直属、父子关系
.one>.two
{
    background-color:yellow;
}
使用时：
<div class="one">
    <div class="two">
        yellow
        <div class="two">
            no yellow, other color for user defined
        </div>
    </div>
</div>

@mixin混合宏

  • @mixin 是用来声明混合宏的关键词
  • 最大的不足之处是会生成冗余的代码块（继承、占位符弥补不足）（只此@mixin会生成重复的css）
例如，当给某个元素设定 混合宏代码段 时 
@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
使用时：
button {
    @include border-radius(5px);
}
button2 {
    @include border-radius;
}
编译为：
button {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
button2 {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

@extend继承\扩展

  • @extend 是用来声明继承的关键词
  • 可以智能的合并生成的css代码
  • 和类的继承一致，子类可以覆盖父类属性
例如，当给某个元素设定 继承代码段 时 
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
使用时：
.button {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}
.button2 {
  background-color: orange;
  color: #fff;
  @extend .btn;
}
编译为：
.btn, .button, .button2 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
} // 合并到了一起
.button {
  background-color: #f36;
  color: #fff;
}
.button {
  background-clor: orange;
  color: #fff;
}

scss常用运算

if运算

  • 表达式：if(expression, value1, value2)
例如，当给某个元素使用 if 样式时
p {
    color: if(1 + 1 = 2, green, yellow);
}
编译为：
p{
    color: green;
}

@if运算

  • 表达式：@if expression { value1 }
  • 可以连着 @else @else if
例如，当给某个元素使用 if 样式时
p {
    color: if(1 + 1 = 2, green, yellow);
}
编译为：
p{
    color: green;
}
// 或者
p {
    @if $age == 18 {
        color: red;
    } @else if $age == 19 {
        color: blue;
    } @else {
        color: green;
    }
}

@for运算

  • 表达式：@for $var from <start> through <end> 或 @for $var from <start> to <end>
例如，当给某个元素使用 @for 样式时
@for $i from 1 through 4 {
    .test-#{$i} { width: 2px * $i; }
}
编译为：
.test-1 {
  width: 2px; 
}
.test-2 {
  width: 4px; 
}
.test-3 {
  width: 6px; 
}
.test-4 {
  width: 8px; 
}

round运算

  • 表达式：round($number) 四舍五入为整数
  • 类似的还有floor($number) abs($number) min($number…) max($number…) 等等
例如，当给某个元素使用 round 样式时
p {
    height: round(10px + 2pt);
}
编译为：
p {
    height: 13px;
}

calc运算

  • 表达式：calc(+ - * /) 多单位类型运算，包含绝大多数单位
例如，当给某个元素使用 calc 样式时
p {
    height: calc(10px + 2pt);
}
编译为：
p {
    height: 12.6666666667px;
}

clamp运算

  • 表达式：clamp($min, $number, $max) 多单位类型运算，获取范围内的数值，区间限制
  • clamp为css原生函数，没有转换过程，
例如，当给某个元素使用 clamp 样式时
p {
    height: clamp(10px, 20vh, 90px);
}
运行时为：获取20vh的实际高度，返回区间内的数值
avatar
文章
阅读
粉丝