全部标签
写点什么
OpenHarmony算法元宇宙MySQL移动开发学习方法Web3.0高效工作数据库Python音视频前端AI大数据团队管理程序员运维深度思考低代码redisgolang微服务架构flutter 查看更多

Sass 入门使用指南

作者：小鑫同学
  • 2022-10-13
    北京

  • 本文字数：3082 字

    阅读完需：约 10 分钟

Sass入门使用指南

大家好，我是小鑫同学。一位从事过 Android 开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

快速使用

  1. 在 VSCode 中安装 Live Sass Compiler 插件

  2. Watch Sass 从状态栏单击以打开实时编译，然后 Stop Watching Sass 从状态栏单击以打开实时编译。

  3. 在 html 页面引入动态生成的.css 文件

Sass 使用指南

内容摘录自: www.sass.hk/

1. 使用变量

声明/引用/命名, 重复定义的变量按最后一次定义为准


  1. 声明规则: $key:value


$highlight-color: #F90;
复制代码


  1. 引用规则: $key:value


.box {   color: $highlight-color;}
复制代码


  1. 命名规则: kebab-case(建议)

2. 嵌套规则

  1. &标识符: 在需要避免 sass 默认解套后空格连接父子选择器导致样式不生效的的情况下使用 &处理,如遇到伪类选择器:hover 等。


article a {  color: blue;  &:hover { color: red }}
复制代码


  1. 群组选择器的嵌套: 多个子选择器拥有公共父选择器,并且需要给子选择器设置通用属性的情况。


.container {  h1, h2, h3 {margin-bottom: .8em}}
复制代码


  1. 子组合选择器和同层选择器: > 、+ 和 ~

  2. 子组合选择器>，选择一个元素的直接子元素

  3. 同层相邻组合选择器+，选择 header 元素后紧跟的 p 元素

  4. 同层全体组合选择器~，选择所有跟在 article 后的同层 article 元素，不管它们之间隔了多少其他元素


// 子组合选择器article section { margin: 5px }article > section { border: 1px solid #ccc }
// 同层相邻组合选择器header + p { font-size: 1.1em }
// 同层全体组合选择器article ~ article { border-top: 1px dashed #ccc }
复制代码


  1. 嵌套属性


// css语法nav {  border-style: solid;  border-width: 1px;  border-color: #ccc;}
// sass语法nav {  border: {  style: solid;  width: 1px;  color: #ccc;  }}
复制代码


// css语法nav {  border: 1px solid #ccc;  border-left: 0px;  border-right: 0px;}
// sass语法nav {  border: 1px solid #ccc {  left: 0px;  right: 0px;  }}
复制代码

3. 导入 SASS 文件

  1. css 中的@import执行到后下载 css 文件,导致页面加载慢

  2. sass 中的@import在生成 css 的时候导入,无法额外下载

  3. sass 导入可以省略后缀



  1. 导入 sass 部分文件

  2. 通常在编写的 base-style 的文件是无需主动编译为 css 文件的,在其他 sass 文件中使用@import导入后生效即可。

  3. 通过将文件命名为'_'开头即不会在编译时生成单独文件

  4. 如需导入的文件为: themes/_night-sky.scss,那么导入的时候可以写@import "themes/night-sky";

  5. 默认变量值

  6. 多次定义相同变量会造成值的覆盖

  7. 可以通过使用!default进行标记


$fancybox-width: 400px !default;.fancybox {  width: $fancybox-width;  /* 无效声明 */  $fancybox-width: 500px;}
复制代码


  1. 嵌套导入

  2. 直接导入到需要使用的样式选择器中


文件: _blue-theme.scss内容:aside {  background: blue;  color: white;}// 嵌套导入.blue-theme {  @import "blue-theme"}
复制代码


  1. 原生 css 导入


  1. 勿用 sass 的 @import导入原始 css 文件

  2. 可将 css 文件后缀修改为 scss 后缀

5. 混合@mixin

何时使用: 用于展示性样式的重用


  1. 定义:


@mixin rounded-corners {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;}
复制代码


  1. 使用:


notice {  background-color: green;  border: 2px solid #00aa00;  @include rounded-corners;}
复制代码


  1. 混合器中 css 规则


内部除了包含属性也可包含 css 规则


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


  1. 给混合器传参


@mixin link-colors($normal, $hover, $visited) {  color: $normal;  &:hover { color: $hover; }  &:visited { color: $visited; }}
// 使用时动态赋值a {  @include link-colors(blue, red, green);}
复制代码


  1. 默认参数值


@mixin link-colors(    $normal,    $hover: $normal,    $visited: $normal  ){  color: $normal;  &:hover { color: $hover; }  &:visited { color: $visited; }}
// 使用时动态赋值 $hover和$visited也会被自动赋值为red@include link-colors(red)
复制代码

6. 继承@extend

何时使用: 类名用于语义化样式的重用


  1. 定义


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


  1. 使用


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

Sass 补充

数据类型:

  1. 数字: 1, 2, 13, 10px

  2. 字符串: "foo", 'bar', baz

  3. 颜色: blue, #04a3f9, rgba(255,0,0,0.5)

  4. 布尔型: true, false

  5. 空值: null

  6. 数组,用空格或逗号作分隔符: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif

  7. maps: (key1: value1, key2: value2)

运算:

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。


  1. 数字类型运算: +, -, *, /(除后取整), %(除后取余)数值运算, <, >, <=, >=关系运算

  2. 颜色值运算: 叠加符 '+'

  3. 字符串运算: 连接符 '+'

  4. 布尔运算: and, or, not

使用函数

SassScript 定义的函数


p {  color: hsl(0, 100%, 50%);}// 编译为:p {  color: #ff0000; }
复制代码

关键词参数

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

插值语句 #{}

$name: foo;$attr: border;p.#{$name} {  #{$attr}-color: blue;}
复制代码

控制语句

  1. @if


p {  @if 1 + 1 == 2 { border: 1px solid; }  @if 5 < 3 { border: 2px dotted; }  @if null  { border: 3px double; }}// 编译后p {  border: 1px solid; }
复制代码


  1. @for


@for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; }}// 编译后.item-1 {  width: 2em; }.item-2 {  width: 4em; }.item-3 {  width: 6em; }
复制代码


  1. @each: 格式是 $var in <list>


@each $animal in puma, sea-slug, egret, salamander {  .#{$animal}-icon {    background-image: url('/images/#{$animal}.png');  }}// 编译后.puma-icon {  background-image: url('/images/puma.png'); }.sea-slug-icon {  background-image: url('/images/sea-slug.png'); }.egret-icon {  background-image: url('/images/egret.png'); }.salamander-icon {  background-image: url('/images/salamander.png'); }
复制代码


  1. @while


$i: 6;@while $i > 0 {  .item-#{$i} {     width: 2em * $i;   }  $i: $i - 2;}// 编译后.item-6 {  width: 12em; }
.item-4 {  width: 8em; }
.item-2 {  width: 4em; }
复制代码

输出格式

  1. nested


Nested （嵌套）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。


  1. expand/体积较大


Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。


  1. compact/体积较小


Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。


  1. compressor/压缩的


Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。

划线
评论
复制
发布于: 刚刚阅读数: 7

版权声明: 本文为 InfoQ 作者【小鑫同学】的原创文章。

原文链接:【http://xie.infoq.cn/article/fdf2e30dc4524c63a6cf8bdd1】。文章转载请联系作者。

前端Node10月月更
用户头像

小鑫同学

关注

⚡InfoQ签约作者 2018-12-10 加入

来【IT200.cn】找我

评论

发布
暂无评论
Copyright © 2022, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
Sass入门使用指南_前端_小鑫同学_InfoQ写作社区