网站专题BANNER

sass 进阶使用文档

发表日期:2020-08-14 文章编辑:洛壹网络 文章来源:深圳网站建设

sass定义变量使用$符号。

$width: 5em;
#main {
  width: $width;
}


变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global 声明:

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}


编译后


#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

SassScript 支持 6 种主要的数据类型:

  • 数字,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)


sass运算

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。

关系运算 <, >, <=, >= 也可用于数字运算,相等运算 ==, != 可用于所有数据类型。


p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

编译为

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }


如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹。

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

编译为

p {
  font: 12px/30px; }

+ 可用于连接字符串

p {
  cursor: e + -resize;
}

编译为

p {
  cursor: e-resize; }

混合指令 (Mixin)

混合指令的用法是在 @mixin 后添加名称与样式

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

混合也需要包含选择器和属性,甚至可以用 & 引用父选择器:

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

9.2. 引用混合样式 @include 

使用 @include 指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选):

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译为

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }


给混合模型定义参数

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

编译为

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }


相关内容
我们
定制
咨询
联系
在线咨询
您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器