CLAYYA

乌贼馋辣鱼的博客

首页面经React前端

Sass

2024-11-11

Sass

介绍

mixin实质上是利用语言特性（比如 Ruby 的 include 语法、Python 的多重继承）来更简洁地实现组合模式

在命令行中运行 Sass：

sass input.scss output.css

监视单个 Sass 文件，每次修改并保存时自动编译：

sass --watch input.scss:output.css

监视整个文件夹：

sass --watch app/sass:public/stylesheets

CSS功能扩展

嵌套规则

内层的样式将它外层的选择器作为父选择器，

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
编译为：

#main p {
  color: #00ff00;
  width: 97%; }

#main p .redbox {
    background-color: #ff0000;
    color: #000000; }

父选择性 &​

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover​ 样式时，或者当 body​ 元素有某个 classname​ 时，可以用 &​ 代表嵌套规则外层的父选择器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}
编译为
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

​&​ 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如：

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}
编译为
#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

属性嵌套

有些 CSS​ 属性遵循相同的命名空间 (namespace)，比如 font-family​, font-size​, font-weight ​都以 font​ 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass​ 允许将属性嵌套在命名空间中，例如：

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}
编译为
.funky {
  font: 20px/24px;
    font-family: fantasy;
    font-weight: bold; }

占位符选择器 %foo​

注释/* */​和//​

多行注释 /* */​，以及单行注释 //​，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

SassScript

变量

SassScript 最普遍的用法就是变量，变量以美元符号$​开头，变量支持块级作用域，将局部变量转换为全局变量可以添加 !global ​声明：

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

数据类型

字符串

有引号字符串 (quoted strings)，如 "Lucida Grande" 'http://sass-lang.com'；与无引号字符串 (unquoted strings)，如 sans-serif bold，在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{} ​(interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名：

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");
编译为

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

数组

就是CSS 中 margin: 10px 15px 0 0​ 或者font-face: Helvetica, Arial, sans-serif​这样通过空格或者逗号分隔的一系列的值，独立的值就是只含一个值得数组。

Sass list functions 赋予了数组更多新功能：nth​ 函数可以直接访问数组中的某一项；join​ 函数可以将多个数组连接在一起；append​ 函数可以在数组中添加新值；而 @each ​指令能够遍历数组中的每一项。

运算

除法

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

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

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

颜色运算符

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：

color: #010203 + #040506;

是计算01 + 04 = 05​ 02 + 05 = 07​ 03 + 06 = 09​

如果有alpha值，则值相等才可以进行运算：

color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);

字符串运算

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

content: "Foo " + Bar;
font-family: sans- + "serif";
编译为
content: "Foo Bar";
font-family: sans-serif;

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

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

插值语句 #{}​

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

@-Rules与指令

@import

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的CSS 语句，不会导入任何 Sass 文件

  • 文件拓展名是 .css；
  • 文件名以 开头；
  • 文件名是 url()；
  • @import 包含 media queries。

如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

@import "foo.scss";

分音

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线_​，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。

@import "colors";

上面的例子，导入的其实是 _colors.scss 文件

嵌套