[关闭]
@Bios 2018-12-10T08:47:34.000000Z 字数 2025 阅读 685

Sass基础笔记

sass


语法格式

这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本,其文件名以“.sass”为扩展名。
来看一个 Sass 语法格式的简单示例。假设我们有一段这样的 CSS 代码:

  1. body {
  2. font: 100% Helvetica, sans-serif;
  3. color: #333;
  4. }
  1. $font-stack: Helvetica, sans-serif
  2. $primary-color: #333
  3. body
  4. font: 100% $font-stack
  5. color: $primary-color

在整个 Sass 代码中,我们没看到类似 CSS 中的大括号和分号。
注:这种语法格式对于前端人员都不太容易接受,而且容易出错。

scss变量

变量声明

  1. $color: red // 定义变量 '$'
  2. .box{
  3. color:$color // 使用变量
  4. }

变量默认值

sass 的默认变量仅需要在值后面加上 !default 即可。

  1. $baseLineHeight: 2;
  2. $baseLineHeight: 1.5 !default;
  3. body{
  4. line-height: $baseLineHeight;
  5. }

sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。

局部变量和全局变量

  1. //SCSS
  2. $color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
  3. .block {
  4. color: $color;//调用全局变量
  5. }
  6. em {
  7. $color: red;//定义局部变量
  8. a {
  9. color: $color;//调用局部变量
  10. }
  11. }
  12. span {
  13. color: $color;//调用全局变量
  14. }

混合宏

在 Sass 中,使用“@mixin”来声明一个混合宏。

  1. // 不带参数
  2. @mixin border-radius{
  3. -webkit-border-radius: 5px;
  4. border-radius: 5px;
  5. }
  6. // 带值参数
  7. @mixin border-radius($radius:5px){
  8. -webkit-border-radius: $radius;
  9. border-radius: $radius;
  10. }
  11. // 不带值参数 由调用的时候传入
  12. @mixin border-radius($radius){
  13. -webkit-border-radius: $radius;
  14. border-radius: $radius;
  15. }
  16. // 复杂宏
  17. @mixin box-shadow($shadow...) {
  18. @if length($shadow) >= 1 {
  19. @include prefixer(box-shadow, $shadow);
  20. } @else{
  21. $shadow:0 0 4px rgba(0,0,0,.3);
  22. @include prefixer(box-shadow, $shadow);
  23. }
  24. }
  25. // 这个 box-shadow 的混合宏,带有多个参数,这个时候可以使用“ … ”来替代。简单的解释一下,当 $shadow 的参数数量值大于或等于“ 1 ”时,表示有多个阴影值,反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。
  1. // 调用宏 '@include'
  2. .button {
  3. @include border-radius; // 有默认值
  4. @include border-radius(5px); // 自己传,也可以当作覆盖
  5. }
  6. .box {
  7. @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
  8. }

继承

  1. //SCSS
  2. .btn {
  3. border: 1px solid #ccc;
  4. padding: 6px 10px;
  5. font-size: 14px;
  6. }
  7. .btn-primary {
  8. background-color: #f36;
  9. color: #fff;
  10. @extend .btn;
  11. }
  12. .btn-second {
  13. background-color: orange;
  14. color: #fff;
  15. @extend .btn;
  16. }

占位符

Sass 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。

  1. %mt5 {
  2. margin-top: 5px;
  3. }
  4. %pt5{
  5. padding-top: 5px;
  6. }
  7. .btn {
  8. @extend %mt5;
  9. @extend %pt5;
  10. }
  11. .block {
  12. @extend %mt5;
  13. span {
  14. @extend %pt5;
  15. }
  16. }
  1. //CSS
  2. .btn, .block {
  3. margin-top: 5px;
  4. }
  5. .btn, .block span {
  6. padding-top: 5px;
  7. }

从编译出来的 CSS 代码可以看出,通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注