笔记: Css、Less、Scss 中分别如何定义变量

·  阅读 48

先说一个大家都不怎么明确的 scss 与 sass 区别

Sass 有两套语法规则:

  • 一种是用缩进作为分隔符来区分代码块的
.father 
    width:100px; 
    .son width:50px;
复制代码
  • 一种是和 Css 一样采用了大括号{}作为分隔符。后一种语法规则又名 Scss,其实它也是 Sass
.father{ 
    width:100px; 
    .son{ 
        width:50px; 
    } 
}
复制代码

现在来看他们分别怎么定义和使用变量

css

// 定义
.foo {
  --borderColor: #d9d9d9;
}

// 使用
.foo {
  border: 1px solid var(--borderColor);
}
复制代码

less

// 定义
@bg-color : #d9d9d9;

// 使用
.foo {
  border-right: 1px solid @bg-color;
}
复制代码

scss

//定义
$bg-color : #d9d9d9;

// 使用
.foo {
  border: 1px solid $bg-color;
}
复制代码
分类:
前端
标签: