scss的简单使用

无知的小菜鸡

已于 2022-05-09 13:47:29 修改

阅读量487

点赞数

分类专栏： HTML+CSS 文章标签： css 前端

于 2020-06-22 10:55:49 首次发布

本文链接：https://blog.csdn.net/weixin_41897680/article/details/106896608

版权

HTML+CSS 专栏收录该内容

39 篇文章 11 订阅

订阅专栏

最近学习vue时，在style中发现了这个 <style lang="scss">，因为不了解所以去查了一下，scss可以看作时css的升级版

简介：

Sass 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。
Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
Sass 完全兼容所有版本的 CSS。
Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass 文件后缀为 .scss。

Sass中文网

一下内容是我自己觉得比较有用的，其他内容自行查看官方文档，以官方文档为准。

基本使用

安装：NPM 安装（其它安装方式自行百度）

npm install -g sass

变量
变量用于存储一些信息，它可以重复使用。
scss中的变量可以存储字符串、数字、颜色值、布尔值、列表、null 值
格式：$variablename: value;
示例：

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

嵌套

样式嵌套
Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。
示例

//css
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

//scss
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

嵌套属性
针对有前缀的属性

//css
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

//scss
font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

Sass @import
@import 指令可以让我们导入其他文件等内容。
格式：@import filename;
注：包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss
示例：

//mycss
html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

//使用
@import "mycss";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass @mixin 与 @include
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。

基本使用
示例：

@mixin important-text {
  color: red;
  font-size: 25px;
}
.danger {
  @include important-text;
  background-color: green;
}

//转化后的css
.danger {
  color: red;
  font-size: 25px;
  background-color: green;
}

除此之外 混入中也可以包含混入

接收变量
示例：

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}
.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}

//转化后的css
.myArticle {
  border: 1px solid blue;
}

可变变量
当不确定变量的个数时可以使用可变变量。我们就可以使用 … 来设置可变参数
示例：

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

Sass @extend 与继承
@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用

示例：

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

@use
从其他Sass样式表加载mixin，function和变量，并将来自多个样式表的CSS组合在一起
例如：
在这里插入图片描述

//index.scss
@use 'bt-user-tool.scss';

其他内容

运算
支持加减乘除取余运算，正常与js的运算一致，下面是一些需要注意的

除法运算
以下三种情况 / 将被视为除法运算符号：

如果值，或值的一部分，是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的一部分

p {
  font: 10px/8px;        //结果 10px/8px 不符合上面的三种情况     
  $width: 1000px;        
  width: $width/2;       // 结果 500px  某个值是变量      
  width: round(1.5)/2;       // 没用，没有单位
  height: (500px/2);          // 250px 有圆括号
  margin-left: 5px + 8px/2px;    // 9px 使用了加号，算数表达式
}

颜色值运算
颜色值的运算是分段进行，就是分别计算红色、绿色和蓝色的值

p {
  color: #010203 + #040506;         // #050709   01+04=05  02+05=07 03+06=09
}
p {
  color: #010203 * 2;      // #020406   01*2=02 02*2=04 03*2=06
}

rgb的计算也是这样，但是rgba的计算必须有相同的透明度才能计算

字符串运算
如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号

p:before {
  content: "Foo " + Bar;              //  "Foo Bar"
  font-family: sans- + "serif";       // sans-serif
}

在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：

p:before {
  content: "I ate #{5 + 10} pies!";        // "I ate 15 pies!"
}

插值语句 #{}
通过 #{} 插值语句可以在选择器或属性名中使用变量（这个很有用，可以设置动态值）：

$name: foo;
$attr: border;
p.#{$name} {                     p.foo {
  #{$attr}-color: blue;                 border-color: blue;
}                                     }

@if
当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

//结果
p {
  border: 1px solid; 
 }

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。

@for
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。

@for $var from <start> through <end> 包含开始和结尾
for $var from <start> to <end> 只包含开始

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

结果
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@each
@each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而是一连串的值，也就是值列表

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

结果
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }