sass初级语法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了sass初级语法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1624字，纯文字阅读大概需要3分钟。

内容图文

sass --watch test.scss:test.css --style compact --style expanded

如下图:

1 自定义变量

test.scss内容是:

$color: black;
.test1 {
    background-color: $color;
} 

编译成test.css内容是:

.test1 {
  background-color: black;
}

2 在字符串内加变量

test.scss内容是:

$left: left;
.test2 {
    border-#{$left}:1px  #000 solid;
}

编译成test.css内容是:

.test2 {
  border-left: 1px  #000 solid;
}

3 样式内进行加减乘除(注意除法书写)

test.scss内容是:

$para:4;
.test3 {
    height: 5px+3px;
    width: (14px/7);
    right: $para*4;
}

编译成test.css内容是:

.test3 {
  height: 8px;
  width: 2px;
  right: 16;
}

4 子元素书写

test.scss内容是:

.test4 {
    .lala {
        color: pink;
    }
}

编译成test.css内容是:

.test4 .lala {
  color: pink;
}

5 继承(SASS允许一个选择器，继承另一个选择器)

test.scss内容是:

.class1 {
    border-left: 1px #000 solid;
}
.class2 {
    @extend .class1;
    font-size: 15px;
}

编译成test.css内容是:

.class1, .class2 {
  border-left: 1px #000 solid;
}
.class2 {
  font-size: 15px;
}

6 复用代码块

test.scss内容是:(无变量)

@mixin test6 {
    height: 5px;
    left: 20px;
    top: 10px;
}
.lili {
    @include test6;
}

编译成test.css内容是:(无变量)

.lili {
  height: 5px;
  left: 20px;
  top: 10px;
}

这个方法很好用的是可以设置变量,如下:

test.scss内容是:(有变量)

@mixin test62($height) {
    height: $height;
    left: 20px;
    top: 10px;
}
.lili2 {
    @include test62(100px);
}

编译成test.css内容是:(有变量)

.lili2 {
  height: 100px;
  left: 20px;
  top: 10px;
}

7 函数

test.scss内容是:

@function aa($color) {
    @return $color;
}
.test7 {
    color: aa(pink);
}

编译成test.css内容是:

/*example 07*/
.test7 {
  color: pink;
}

8 导入外部scss或者css文件

test.scss内容是:

@import 'more.scss' 

more.scss内容是:

$width: 30px;
.test8 {
    width: $width;
}

编译成test.css内容是:

.test8 {
  width: 30px;
}

内容总结

以上是互联网集市为您收集整理的sass初级语法全部内容，希望文章能够帮你解决sass初级语法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端