2021-11-09 sass

最新推荐文章于 2023-03-11 09:41:49 发布

shangrila-xiu

最新推荐文章于 2023-03-11 09:41:49 发布

阅读量235

点赞数

分类专栏： css 文章标签： sass css css3

本文链接：https://blog.csdn.net/lyx9611/article/details/121225210

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

sass快速入门

sass快速入门官网
 sass中文文档官网
 sass文档

文件命名：早期是.sass无括号和分号，推荐使用*.scss，与css的写法一致，CSS3 语法在 SCSS 中都是通用的

使用变量;

声明变量

$highlight-color: #F90;

这意味着变量 $KaTeX parse error: Expected 'EOF', got '#' at position 21: \dotsight-color现在的值是#̲F90。任何可以用作css属性\dots$ basic-border: 1px solid black;，或以逗号分割的多个属性值，如$plain-font: “Myriad Pro”、Myriad、“Helvetica Neue”、Helvetica、“Liberation Sans”、Arial和sans-serif; sans-serif;。这时变量还没有生效，除非你引用这个变量——我们很快就会了解如何引用。
与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{…}块中（如@media或者@font-face块），情况也是如此：

变量引用

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

变量名用中划线还是下划线分隔【并不强制要求，下划线居多】

下面的例子可以看出无论是中划线还是下划线的，其实是同一个变量：用中划线声明的变量可以使用下划线的方式引用，反之亦然实际上，在sass的大多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。但是在sass中纯css部分不互通，比如类名、ID或属性名。

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}

嵌套CSS 规则

在.css文件中或者<style lang="scss"></style>我们可以使用这样的写法

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

嵌套 @import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

//假设 example.scss 文件包含以下样式：

.example {
  color: red;
}
//然后导入到 #main 样式内
#main {
  @import "example";
}
//编译后
#main .example {
  color: red;
}

父选择器的标识符&

当我们在下面的html中，

<article><a href="https://xxx"></a></article>

/*错误写法*/
article a {
  color: blue;
  :hover { color: red }
}
/*正确写法*/
article a {
  color: blue;
  &:hover { color: red }
}
/*编译后*/
article a { color: blue }
article a:hover { color: red }

除了以上的用法，还有一种：父选择器之前添加选择器
举例来说，当用户在使用IE浏览器时，你会通过JavaScript在标签上添加一个ie的类名，为这种情况编写特殊的样式如下：

#content aside {
  color: red;
  body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

当sass遇到群组选择器（由多个逗号分隔开的选择器形成）也能完美地处理这种嵌套。

群组选择器的嵌套

css的写法会让你在群组选择器中的每一个选择器前都重复一遍容器元素的选择器。
对于内嵌在群组选择器内的嵌套规则，处理方式也一样：

/*css*/
.container h1, .container h2, .container h3 { margin-bottom: .8em }
/*sass/scss*/
.container {
  h1, h2, h3 {margin-bottom: .8em}
}
/*内嵌在群组选择器内的嵌 套规则*/
nav, aside {
  a {color: blue}
}
/*编译后*/
nav a, aside a {color: blue}

有利必有弊，你需要特别注意群组选择器的规则嵌套生成的css。虽然sass让你的样式表看上去很小，但实际生成的css却可能非常大，这会降低网站的速度。

子组合选择器和同层组合选择器：>、+和~

子组合选择器>选择一个元素的直接子元素
同层相邻组合选择器+选择header元素后紧跟的p元素
同层全体组合选择器~，选择所有跟在article后的同层article元素

/*css*/
article > section { border: 1px solid #ccc }
header + p { font-size: 1.1em }
article ~ article { border-top: 1px dashed #ccc }

这些组合选择器可以毫不费力地应用到sass的规则嵌套中。可以把它们放在外层选择器后边，或里层选择器前边：

/*sass/scss*/
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
/*编译后*/
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

嵌套属性

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来

/*1-推荐*/
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
/*1编译后*/
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
/*2-推荐*/
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
/*2编译后*/
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

随着你的样式表变得越来越大，这种写法也很难保持结构清晰。有时，处理这种大量样式的唯一方法就是把它们分拆到多个文件中。sass通过对css原有@import规则的改进直接支持了这一特性

导入SASS文件

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器（参见2.5节）均可在导入文件中使用。

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀（见下图）。这样，在不修改样式表的前提下，你完全可以随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。举例来说，@import"sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。

在这里插入图片描述

//Sass 允许同时导入多个文件
@import "rounded-corners", "text-shadow";
//导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

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

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

@import "colors";

使用SASS部分文件

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。

此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。

局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，sass有一个功能刚好可以解决这个问题，即默认变量值。

默认变量值`!default`

使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

嵌套导入

跟原生的css不同，sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方
被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。

_blue-theme.scss

aside {
  background: blue;
  color: white;
}

base.css

.blue-theme {@import "blue-theme"}
/*编译后*/
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

原生的CSS导入

请添加图片描述

静默注释

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

混合器

混合器使用@mixin标识符定义

/*混合器*/
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/*使用*/
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
/*编译后*/
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

通过使用参数，你可以使用混合器把你样式中的通用样式抽离出来，然后轻松地在其他地方重用。
实际上，混合器太好用了，一不小心你可能会过度使用。
大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以，首先我们将讨论混合器的使用场景，避免滥用。

何时使用混合器

一条经验法则就是你能否为这个混合器想出一个好的名字。如：如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-cornersfancy-font或者no-bullets，那么往往能够构造一个合适的混合器
混合器在某些方面跟css类很像。都是让你给一大段样式命名，所以在选择使用哪个的时候可能会产生疑惑。最重要的区别就是类名是在html文件中应用的，而混合器是在样式表中应用的。这就意味着类名具有语义化含义，而不仅仅是一种展示性的描述：用来描述html元素的含义而不是html元素的外观。而另一方面，混合器是展示性的描述，用来描述一条css规则应用之后会产生怎样的效果
如果一个html元素有一个notice的类名，就表明了这个html元素的用途：向用户展示提醒信息。rounded-corners混合器是展示性的，它描述了包含它的css规则最终的视觉样式，尤其是边框角的视觉样式。混合器和类配合使用写出整洁的html和css，因为使用语义化的类名亦可以帮你避免重复使用混合器。为了保持你的html和css的易读性和可维护性，在写样式的过程中一定要铭记二者的区别

混合器中的CSS规则

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则

ul.plain {
  color: #444;
  @include no-bullets;
}
/*编译后*/
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

混合器中的规则甚至可以使用sass的父选择器标识符&。使用起来跟不用混合器时一样，sass解开嵌套规则时，用父规则中的选择器替代&

如果一个混合器只包含css规则，不包含属性，那么这个混合器就可以在文档的顶部调用，写在所有的css规则之外。
如果你只是为自己写一些混合器，这并没有什么大的用途，但是当你使用一个类似于Compass的库时，你会发现，这是提供样式的好方法，原因在于你可以选择是否使用这些样式。

给混合器传参【不推荐】

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

当混合器被@include时，你可以把它当作一个css函数来传参

a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，
sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

@include link-colors(red) $hover和$visited也会被自动赋值为red

默认参数值【推荐】

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。
参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用

@mixin link-colors($normal,$hover: $normal,$visited: $normal){
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

使用选择器继承来精简CSS

基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

在上边的代码中，.seriousError将会继承样式表中任何位置处为.error定义的所有样式。以class="seriousError"
修饰的html元素最终的展示效果就好像是class="seriousError error"。相关元素不仅会拥有一个3px宽的边框，而且这个边框将变成红色的，这个元素同时还会有一个浅红色的背景，因为这些都是在.error里边定义的样式。

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

在class="seriousError"的html元素内的超链接也会变成红色和粗体。

何时使用继承

混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。
因为继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上

继承的高级用法

继承的工作细节

使用继承的最佳实践

继承会让你的css美观、整洁。因为继承只会在生成css时复制选择器，而不会复制大段的css属性。
但是如果你不小心，可能会让生成的css中包含大量的选择器复制。避免这种情况出现的最好方法就是不要在css规则中使用后代选择器

/*别这样写*/
.foo .bar { @extend .baz; }
.bip .baz { a: b; }

如果任何一条规则里边的后代选择器再长一点，sass需要考虑的情况就会更多。实际上sass并不总是会生成所有可能的选择器组合，即使是这样，选择器的个数依然可能会变得相当大，所以如果允许，尽可能避免这种用法

总结

sass编写清晰、无冗余、语义化的css
变量是sass提供的最基本的工具。通过变量可以让独立的css值变得可重用，无论是在一条单独的规则范围内还是在整个样式表中。变量、混合器的命名甚至sass的文件名，可以互换通用_和-。
ass的嵌套机制。嵌套允许css规则内嵌套css规则，减少重复编写常用的选择器，同时让样式表的结构一眼望去更加清晰。
sass同时提供了特殊的父选择器标识符&，通过它可以构造出更高效的嵌套
不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

sass中文文档

使用sass

Sass 可以通过以下三种方式使用：

作为命令行工具；
独立的 Ruby 模块 (Ruby module)；
Rack-enabled 框架的插件（例如 Ruby on Rails 与 Merb）

使用步骤

先安装yarm、npm、gem

gem install sass

在命令行中运行 Sass

sass input.scss output.css

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

sass --watch input.scss:output.css

监视整个文件夹

sass --watch app/sass:public/stylesheets

获取帮助

sass --help

在 Ruby 中使用 Sass 也非常容易，Sass gem 安装完毕后运行 require “sass” 然后按照下面的方法使用 Sass::Engine：

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"

缓存

Sass 自动缓存编译后的模板与 partials，这样做能够显著提升重新编译的速度，尤其在处理由 @import 导入多个子文件的大型项目时。

单独使用 Sass，缓存内容保存在 .sass-cache 文件夹中。在 Rails 和 Merb 项目中缓存文件保存在 tmp/sass-cache 文件夹中（可通过 :cache_location 修改路径）。禁用缓存可将 :cache 设为 false

判断语法格式

Sass 命令行工具根据文件的拓展名判断所使用的语法格式，没有文件名时 sass 命令默认编译 .sass 文件，添加 --scss 选项或者使用 scss 命令编译 SCSS 文件。

编码格式

@charset 声明，最后是 Ruby string encoding，假如都没有检测到，默认使用 UTF-8 编码。

使用 @charset 可以声明特定的编码格式。在样式文件的起始位置（前面没有任何空白与注释）插入 @charset "encoding-name"， Sass 将会按照给出的编码格式编译文件。注意所使用的编码格式必须可转换为 Unicode 字符集。

Sass 以 UTF-8 编码输出 CSS 文件，当且仅当编译后的文件中包含非 ASCII 字符时，才会在输出文件中添加 @charset 声明，而在压缩模式下 (compressed mode) 使用 UTF-8 byte order mark 代替 @charset 声明语句。

占位符选择器 %foo

Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。必须通过 @extend 指令调用，更多介绍请查阅 @extend-Only Selectors。

Interactive Shell

Interactive Shell 可以在命令行中测试 SassScript 的功能。在命令行中输入 sass -i，然后输入想要测试的 SassScript 查看输出结果

数据类型 (Data Types)

请添加图片描述

字符串

SassScript 支持 CSS 的两种字符串类型：有引号字符串 (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!"; }

数组

数组中可以包含子数组，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组。如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。变化是，之前的 1px 2px, 5px 6px 使用逗号分割了两个子数组 (comma-separated)，而 (1px 2px) (5px 6px) 则使用空格分割(space-separated)。

当数组被编译为 CSS 时，Sass 不会添加任何圆括号（CSS 中没有这种写法），所以 (1px 2px) (5px 6px) 与 1px 2px, 5px 6px 在编译后的 CSS 文件中是完全一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个数组的数组，而后者是包含四个值的数组。

用 () 表示不包含任何值的空数组（在 Sass 3.3 版之后也视为空的 map）。空数组不可以直接编译成 CSS，比如编译 font-family: () Sass 将会报错。如果数组中包含空数组或空值，编译时将被清除，比如 1px 2px () 3px 或 1px 2px null 3px。

基于逗号分隔的数组允许保留结尾的逗号，这样做的意义是强调数组的结构关系，尤其是需要声明只包含单个值的数组时。例如 (1,) 表示只包含 1 的数组，而 (1 2 3,) 表示包含 1 2 3 这个以空格分隔的数组的数组。

运算

数字运算

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

除法运算

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

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

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

颜色值运算

p {
  color: #010203 + #040506;
}
/*编译后*/
p {
  color: #050709; }

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

数字与颜色值之间也可以进行算数运算，同样也是分段计算的

p {
  color: #010203 * 2;
}
/*编译后*/
p {
  color: #020406; }

计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06

如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
/*编译后*/
p {
  color: rgba(255, 255, 0, 0.75); }

颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
/*编译后*/
p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); }

IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 #AABBCCDD，使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}
/*编译后*/
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

字符串运算

+ 可用于连接字符串
有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的；
无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

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

运算表达式与其他值连用时，用空格做连接符

p {
  margin: 3px + 4px auto;
}
/*编译后*/
p {
  margin: 7px auto; }

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

p:before {
  content: "I ate #{5 + 10} pies!";
}
/*编译后*/
p:before {
  content: "I ate 15 pies!"; }

空的值被视作插入了空字符串：

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}
/*编译后*/
p:before {
  content: "I ate pies!"; }

布尔运算

SassScript 支持布尔型的 and or 以及 not 运算。

数组运算

数组不支持任何运算方式，只能使用 list functions 控制

圆括号

圆括号可以用来影响运算的顺序

函数

p {
  color: hsl(0, 100%, 50%);
}
/*编译后*/
p {
  color: #ff0000; }

关键词参数

关键词参数给函数提供了更灵活的接口，以及容易调用的参数。
关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，
参数名被视为变量名，下划线、短横线可以互换使用。

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

通过 Sass::Script::Functions 查看完整的 Sass 函数列表，参数名，以及如何自定义函数。

插值语句 `#{}`

通过 #{} 插值语句可以在选择器或属性名中使用变量
#{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。

`@media`

@media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
/*编译后*/
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

@media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

输出格式

SASS – 输出格式

:nested – 嵌套格式
:expanded – 展开格式
:compact – 紧凑格式
:compressed – 压缩格式
默认格式是:nested。
可以使用:style选项或使用style命令行参数设置输出格式

:nested

在执行监测(编译)命令时，可以指定输出格式为nested：

sass --watch styles.scss:styles.css --style nested

/*输出*/
div {
  padding: 20px;
  margin: 20px; }

:expanded

展开格式看起来像开发人员手写的格式

sass --watch styles.scss:styles.css --style expanded

div {
  padding: 20px;
  margin: 20px;
}

:compact

紧凑格式占用的空间要小得多，每个CSS选择符定义只占用一行

sass --watch styles.scss:styles.css --style compact

div { padding: 20px; margin: 20px; }

.one { background: red; }

:compressed

压缩格式占用尽可能少的空间，选择符定义不换行，文件最小，一般用于生产版本

sass --watch styles.scss:styles.css --style compressed

div{padding:20px;margin:20px}.one{background:red}

shangrila-xiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-11-09 sass

sass快速入门sass快速入门官网使用变量;声明变量$highlight-color: #F90;这意味着变量KaTeX parse error: Expected 'EOF', got '#' at position 21: …ight-color现在的值是#̲F90。任何可以用作css属性…basic-border: 1px solid black;，或以逗号分割的多个属性值，如$plain-font: “Myriad Pro”、Myriad、“Helvetica Neue”、Helve
复制链接

扫一扫