sass的基本语法整理

最新推荐文章于 2023-06-16 19:00:00 发布
最新推荐文章于 2023-06-16 19:00:00 发布
阅读量1.8k 收藏 13
点赞数
分类专栏： css 文章标签： sass css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccattempt/article/details/122010708
版权

整理下sass的常用语法

目录

1、变量

sass中可以使用变量，变量名以$开头：

$c: #fff;

body {
  color: $c;
}

/* 编译成css */
body {
  color: #fff;
}

注意变量声明遵循实现了块级作用域，如果在选择器内声明的变量，只能在选择器内部使用：

// 正确案例
body {
  width: 100%;
  height: 100%;
  $c: red;

  #app {
    color: $c;
  }
}

/* 编译成css */
body {
  width: 100%;
  height: 100%;
}

body #app {
  color: red;
}

// 错误案例
body {
  width: 100%;
  height: 100%;
  $c: red;
}

.box {
    color: $c;
}
// 错误 Error: Undefined variable: "$c"

如果要在选择器内声明全局变量，需要使用!global

body {
  width: 100%;
  height: 100%;
  $c: red !global;
}

.box {
    color: $c;
}

/* 编译成css */
body {
  width: 100%;
  height: 100%;
}

.box {
  color: red;
}

变量除了在属性值内使用，也可用于属性名或者注释中，但是需要使用#{}包裹：

$c: color;

#app {
    background-#{color}: red;
}

/* 编译成css */
#app {
  background-color: red;
}

$lang: css;
/* 编译成#{$lang} */

/* 编译成css */

2、嵌套语法

sass中可以将子标签嵌套在父标签中，避免了使用父子选择器时重复书写父标签：

$c: #fff;

body {
    color: $c;

    #app {
        width: 100%;
        height: 100%;
    }
}

/* 编译成css */
body {
  color: #fff;
}

body #app {
  width: 100%;
  height: 100%;
}

如果要在嵌套语法中使用父级选择器，使用&即可，它会被替换成父级选择器，常用于:hover、::before等：

a {
    &:hover {
        color: red;
    }
}

/* 编译成css */
a:hover {
  color: red;
}

3、继承

使用@extend可以继承样式：

body {
    .flex {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }

    .container {
        @extend .flex;
        width: 100%;
        height: 100%;
        color: #000;
    }
}

/* 编译成css */
body .flex, body .container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

body .container {
  width: 100%;
  height: 100%;
  color: #000;
}

如果要继承多个样式，可以使用多次@extend，也可以使用逗号分隔：

body {
    #app {
        width: 100%;
        height: 100%;
    }

    .container {
        color: pink;
    }

    .box {
        @extend #app, .container;
    }
}

/* 编译成css */
body #app, body .box {
  width: 100%;
  height: 100%;
}

body .container, body .box {
  color: pink;
}

注意：使用媒体响应时，只能继承@media内的样式，不能继承外部样式，因为这样会编译出很多不必要的样式，因此sass编译时会报错
正确做法：

@media screen {
    body {
        width: 100%;
    }

    #app {
        @extend body;
    }
}

/* 编译成css */
@media screen {
  body, #app {
    width: 100%;
  }
}

错误做法：

body {
    width: 100%;
}

@media screen {
    #app {
        @extend body;
    }
}
// 报错 You may not @extend an outer selector from within @media.
//      You may only @extend selectors within the same directive.

有时候我们只是想提取一个公共样式，但是并不想它作为选择器出现在编译后的css中。这时可以使用占位符，占位符用%开头：

// 案例1
%center {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

#app {
    @extend %center;
    color: #000;
}

/* 编译成css */
#app {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

#app {
  color: #000;
}

// 案例2
body %center {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

#app {
    @extend %center;
    color: #000;
}

/* 编译成css */
body #app {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

#app {
  color: #000;
}

4、注释

sass提供了三种注释，分别是//、/**/、/*!*/，第一种注释在编译后会被去掉，后两种不会，且第三种在压缩后仍会保留，通常用于表示版权信息。

/* 编译成css */
// 我会被去掉
/*! 压缩后我也在 */
body {
  width: 100%;
  height: 100%;
}


/* 编译成css */
/*! 压缩后我也在 */
body {
  width: 100%;
  height: 100%;
}

5、根选择器@at-root

实际不应该叫根选择器(css中有个叫根选择器的：:root)，而是将被@at-root包裹的样式放在最顶层。

body {
  width: 100%;
  height: 100%;

  #app {
    color: red;
  }

  @at-root {
    .container {
      background-color: #fff;
    }
  }
}

/* 编译成css */
body {
  width: 100%;
  height: 100%;
}

body #app {
  color: red;
}

.container {
  background-color: #fff;
}

使用@at-root的好处是无论嵌套多深，都可以直接在@at-root中书写顶层样式。

6、运算

sass中可以使用运算，配合变量可以大幅度避免需要手动计算的情况：

$w: 100px;
$h: 300px;
$bw: 1px;

body {
  width: $w + 100px;
  height: $h - 100px;
  border-bottom-width: $bw * 1;
  border-top-width: $bw / 1;
}

/* 编译成css */
body {
  width: 200px;
  height: 200px;
  border-bottom-width: 1px;
  border-top-width: 1px;
}

注意以下情况/会被解释成除法：

  • 如果值，或值的一部分，是变量或者函数的返回值
  • 如果值被圆括号包裹
  • 如果值是算数表达式的一部分
p {
 font: 10px/8px; // 普通的css，不会被转化
 $width: 1000px;
 width: $width/2; // 使用了变量，会被转化
 width: round(1.5) / 2; // 使用了函数，会被转化
 height: (500px/2); // 使用了括号，会被转化
 margin-left: 5px + 8px/2px; // 使用了加号，会被转化
}

/* 编译成css */
p {
  font: 10px/8px;
  width: 500px;
  width: 1;
  height: 250px;
  margin-left: 9px;
}

如果要确保/被解释为除法，使用括号包裹即可。如果不想让/被解释成除法，可以使用#{}包裹：

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

/* 编译成css */
p {
  font: 12px/30px;
}

使用+可以拼接字符串，字符串是否带引号以左边为准：

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

/* 编译成css */
p:before {
  content: "Foo Bar";
  font-family: sans-serif;
}

如果字符串带引号，则可以使用#{}插入动态的值：

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

/* 编译成css */
p:before {
  content: "I ate 15 pies!";
}

和JavaScript一样，使用圆括号可以改变运算顺序：

p {
  height: 1em + 2em * 3;
  width: (1em + 2em) * 3;
}

/* 编译成css */
p {
  height: 7em;
  width: 9em;
}

除了四则运算以外，还可以使用关系判断语句：>、<、>=、<=、==、!=。其中前四个只能用于数值，后两个可用于任意类型。它们都返回布尔值，常用于判断语句。
sass中的数据类型如下：

  • 数字，1, 2, 13, 10px
  • 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
  • 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
  • 布尔型，true, false
  • 空值，null
  • 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  • maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

7、导入(import)

sass提供了导入功能，使用@import即可：

@import "common.scss";

需要注意的是，如果没有提供后缀名，sass会尝试按照后缀名scss和sass查找文件。以下情况sass不会进行解析，而是原样导入：

  • 指定了文件扩展名为css
  • 文件路径以http://开头
  • 使用的是css的导入语法@import url(路径)
  • @import包含媒体查询
@import "normalize.css";
@import "http://foo.com/bar";
@import url(common.css);
@import "foo" screen;

/* 编译成css */
@import "normalize.css";
@import "http://foo.com/bar";
@import url(common.css);
@import "foo" screen;

8、控制语句

在sass中提供了一些条件判断语句和循环语句：@if、@else-if、@else、@for、@each、@while

$type: monster;

p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

/* 编译成css */
p {
  color: green;
}

@for的使用有两种格式，一种是@for 变量名 from 开始 through 结束、@for 变量名 from 开始 to 结束，它们的区别在于第一种范围是包含开始和结束，而第二种不包括结束。用数学中的开区间和闭区间来表示就是[开始, 结束]和[开始, 结束)的区别：

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

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

/* 编译成css */
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

.item-1 {
  height: 2em;
}

.item-2 {
  height: 4em;
}

@for只能表示数值范围，如果要循环非数值，需要使用@each，它可以遍历list：

@each $var in top, bottom, left, right {
  body {
    border-#{$var}-width: 1px;
  }
}

/* 编译成css */
body {
  border-top-width: 1px;
}

body {
  border-bottom-width: 1px;
}

body {
  border-left-width: 1px;
}

body {
  border-right-width: 1px;
}

注意list既可以用,分隔，也可以使用空格分隔，将其理解为数组即可。因此也存在二维的list

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

/* 编译成css */
.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default;
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer;
}

.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move;
}

上面的用法有点类似JavaScript中同时使用循环和解构：

const list = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
]
for (const [a, b, c] of list) {
  console.log(a, b, c)
}
// 输出
// 1, 2, 3
// 4, 5, 6
// 7, 8, 9

除了可以遍历list，each还可以遍历map:

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

/* 编译成css */
h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

sass里面的 map 类似于JavaScript中的对象：

const map = { a: 1, b: 2, c: 3 }
for (const [key, value] of Object.entries(map)) {
  console.log(key, value)
}
// 输出
// a 1
// b 2
// c 3

最后是while循环，和JavaScript类似：

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

/* 编译成css */
.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

9、混入(mixin)

mixin通常用于抽离公共样式到独立的文件中，类似于JavaScript中常见的将工具方法抽离到utils文件夹中一样，用法类似于函数声明，只是使用时需要借助@include：

@mixin clearfix {
  display: inline-block;

  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  * html & { height: 1px }
}

.box {
  @include clearfix; 
}

/* 编译成css */
.box {
  display: inline-block;
}

.box:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

* html .box {
  height: 1px;
}

也可以给mixin传参：

@mixin set-border($w, $c) {
  border: solid $w $c;
}

.box {
  @include set-border(1px, pink);
}

/* 编译成css */
.box {
  border: solid 1px pink;
}

也可以给mixin设置默认值：

@mixin set-border($dir: top, $w: 1px, $c: pink) {
  border-#{$dir}: solid $w $c;
}

.box1 {
  @include set-border(); // 不传参数时括号也可省略
}

.box2 {
  @include set-border(bottom, 2px, purple);
}

/* 编译成css */
.box1 {
  border-top: solid 1px pink;
}

.box2 {
  border-bottom: solid 2px purple;
}

当不确定参数数量时，可以使用...：

@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);
}

/* 编译成css */
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

mixin也可以接受一个列表list，配合...，可以一次传入多个参数：

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

/* 编译成css */
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

有时候也需要从外部传入一段代码到mixin，传入的样式代码可以通过@content得到，这种用法类似于vue中的默认插槽：

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}

@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

/* 编译成css */
* html #logo {
  background-image: url(/logo.gif);
}

10、自定义函数

虽然mixin已经足够强大，但有时我们不需要指定属性名而只是单纯的想要返回属性值，此时可以通过自定义函数，它和mixin类似，不同点在于它必须有返回值，使用@return返回。自定义函数使用@function声明：

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar {
  width: grid-width(5);
}

/* 编译成css */
#sidebar {
  width: 240px;
}

参考文献

sass官方文档

ccattempt
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue项目中使用sass语法问题
10-16
sass是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。这篇文章主要介绍了在vue项目中使用sass语法,需要的朋友可以参考下
02 【Sass语法介绍-变量】
DSelegent的博客
08-23 2008
02 【Sass语法介绍-变量】
sass的语法格式和基本特性
qq_45784580的博客
02-19 2998
五、 语法格式 1、sass语法格式 是sass的最初语法格式，是通过tab键控制缩进的一种语法规则，对锁紧要求非常严格，而且不带有任何的分号和大括号，把这种语法格式成为sass老版本，其文件名以 “.sass”为扩展名 2、scss语法格式 scss是sass的新语法格式，从外形上来判断他和css几乎是一样的，代码都包裹在一对大括号里，并且末尾结束出都有一个分号，其文件名以 “.sass”为...
Sass使用语法（详细）
weixin_44646763的博客
06-08 6879
Sass使用语法整理
Sass的控制命令（判断、循环）
YYece的博客
06-01 3610
Sass中控制命令指的是@if、@each、@for和@while。具有一定的逻辑判断和循环遍历能力，这个对于懂JavaScript或者后端语言的同学来说一点都不难。但在CSS中是不可思议的一件事情，最起码到目前为止是不太可能的事情。但在Sass这样的CSS预处理器语言中实现了。 @if @if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else
sass基础语法大全，你值得拥有
局外人LZ的博客
06-16 779
说明：变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!default 给一个未通过!default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。通过 #{} 插值语句可以在选择器、属性名或属性值中使用变量。
sass语法解说
02-11
对于一些sass语法进行了解说，主要从安装->监听->....
sass全部语法及写法、写法案例
11-23
本文档包含sass所有的语法、以及写法规范、写法案例。
sass语法官方规范
09-08
sass语法官方规范
less和scss 循环以及常用公共样式
weixin_47247635的博客
12-09 868
1.less 循环padding和margin //less @values: 5,8, 10, 12, 15,17,18, 20,25,28,30,40,45,50,60,70,80,123,140,150; // class的key和对应的属性 .enums() { pt: padding-top; pr: padding-right; pb: padding-bottom; pl: padding-left; mt: margin-top; mr:
1-3 Sass 语法、编译、调试
weixin_30375247的博客
05-25 143
Sass 语法格式 这里说的 Sass 语法是 Sass 的最初语法格式，他是通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本，其文件名以“.sass”为扩展名。 来看一个 Sass 语法格式的简单示例。假设我们有一段这样的 CSS 代码： body { font: 100% Helvetica...
sass的条件判断篇
qq_37805832的博客
08-19 3293
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*@mixin triangle($dir,$width,$color) { width: 0; height: 0; border-width: $width; border-style: sol
Sass中的@extend注意
开发路上的AZhe
03-05 566
Sass在线编译：https://www.sassmeister.com/ 在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个公共box样式与一个特殊box样式，一般会这样写： /* # 先知道什么是通用样式和特殊样式 - 简单一点来说特殊样式就是私有样式，比如有如下一组标签： */ <div class="public-style special-styl
前端面经
GoodLuck_wu5的博客
08-11 258
面试题：DOM元素display、visibility、opacity三种隐藏方式的对比v-if和v-showvue打包优化数组、字符串原生方法页面优化vue生命周期VuexVue全家桶vue双向绑定原理及实现Promisecookies、web存储（sessionStorage 、localStorage）的区别computer、watch区别父子组件间的通信、兄弟组件的通信webpack配置git命令路由拦截盒子垂直居中 DOM元素display、visibility、opacity三种隐藏方式的对比
SASS的概念和使用
m0_57310897的博客
02-28 3197
sass的概念、sass的特点、使用方法、变量声明、嵌套、@import 、@mixin 、 继承等
scss语法
MISS_zhang_0110的博客
08-04 1305
SASS允许用户编写自己的函数。
Sass学习笔记 — 3. 深入学习
jiangbo110119的博客
01-30 1514
Sass (Syntactically Awesome StyleSheets) Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass
Sass -- 条件语句、循环语句、自定义函数
Sun_blog
09-05 567
文章目录条件语句循环语句@for@while@each自定义函数 条件语句 在Sass中可以使用@if、@if-else 、@if-else 来进行条件判断，用法和JS相同。 循环语句 在Sass中可以使用@for、@while 、@each 来进行循环操作。 @for @for的用法不同于JS，Sass中的for有两种格式： @for $i from n through m 表示变量i 的范围是[n, m]; @for $i from n to m 表示变量i 的范围是[n, m); @while
sass判断语句
weixin_30657541的博客
09-16 919
@if判断 @if可一个条件单独使用，也可以和@else结合多条件使用 scss.style css.style 三目判断 语法为：if($condition, $if_true, $if_false)。 三个参数分别表示：条件，条件为真的值，条件为假的值。 scss.style css.style for循环有两种形式，分别为： 1、@...
vue3中sass的语法格式
最新发布
07-15
在Vue 3中，你可以使用Sass作为CSS预处理器来编写样式。Sass是一种CSS的扩展语言，它提供了一些额外的功能，如变量、嵌套规则、混合等。 在Vue 3中，你可以按照以下步骤配置和使用Sass： 1. 首先，确保你的项目中已经安装了sass依赖。你可以通过运行以下命令来安装： ```bash npm install sass ``` 2. 在你的Vue项目中创建一个样式文件，通常是以`.scss`或`.sass`为扩展名。例如，你可以创建一个名为`styles.scss`的文件。 3. 在你的组件中引入该样式文件。你可以在组件的`<style>`标签中使用`@import`指令引入样式文件。例如： ```vue <template> <!-- 组件内容 --> </template> <script> // 组件逻辑 </script> <style lang="scss"> @import "@/styles.scss"; /* 其他样式定义 */ </style> ``` 4. 现在你可以在样式文件中使用Sass的语法了。以下是一些常见的Sass语法示例： - 变量： ```scss $primary-color: #ff0000; .button { color: $primary-color; } ``` - 嵌套规则： ```scss .container { width: 100%; .title { font-size: 18px; } } ``` - 混合： ```scss @mixin border-radius($radius) { border-radius: $radius; } .button { @include border-radius(4px); } ``` 这只是Sass的一小部分功能示例，你可以根据需要进一步探索和使用Sass。 希望这些信息对你有帮助！如果你有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值