前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Sass入门使用指南

Sass入门使用指南

作者头像
前端小鑫同学
发布2022-12-24 11:37:45
3.3K0
发布2022-12-24 11:37:45
举报
文章被收录于专栏:小鑫同学编程历险记

默认文件1618564237140.png
默认文件1618564237140.png

快速使用

  1. 在VSCode中安装Live Sass Compiler插件
  2. Watch Sass从状态栏单击以打开实时编译,然后Stop Watching Sass从状态栏单击以打开实时编译。
  3. 在html页面引入动态生成的.css文件Sass使用指南 内容摘录自: https://www.sass.hk/
1. 使用变量

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

声明规则: $key:value

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

引用规则: $key:value

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

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

2. 嵌套规则

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

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

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

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

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

  1. 子组合选择器>,选择一个元素的直接子元素
  2. 同层相邻组合选择器+,选择header元素后紧跟的p元素
  3. 同层全体组合选择器~,选择所有跟在article后的同层article元素,不管它们之间隔了多少其他元素 ```css // 子组合选择器 article section { margin: 5px } article > section { border: 1px solid #ccc }

// 同层相邻组合选择器 header + p { font-size: 1.1em }

// 同层全体组合选择器 article ~ article { border-top: 1px dashed #ccc }

代码语言:javascript
复制
4. 嵌套属性
```css
// css语法
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

// sass语法
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
代码语言:javascript
复制
// 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导入可以省略后缀
p1.png
p1.png

导入sass部分文件

  1. 通常在编写的base-style的文件是无需主动编译为css文件的,在其他sass文件中使用@import导入后生效即可。
  2. 通过将文件命名为'_'开头即不会在编译时生成单独文件
  3. 如需导入的文件为: themes/_night-sky.scss,那么导入的时候可以写@import "themes/night-sky";

默认变量值

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

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

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

嵌套导入

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

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

原生css导入

  1. 勿用sass的@import导入原始css文件
  2. 可将css文件后缀修改为scss后缀
5. 混合@mixin

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

  1. 定义: ```css @mixin rounded-corners {

-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

代码语言:javascript
复制
2. 使用:
```css
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
  1. 混合器中css规则 内部除了包含属性也可包含css规则
代码语言:javascript
复制
@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
  1. 给混合器传参 ```css @mixin link-colors(normal, hover,

// 使用时动态赋值 a { @include link-colors(blue, red, green); }

代码语言:javascript
复制
6. 默认参数值
```css
@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

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

定义

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

使用

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

Sass补充

数据类型:

数字: 1, 2, 13, 10px

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

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

布尔型: true, false

空值: null

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

maps: (key1: value1, key2: value2)

运算:

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

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

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

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

布尔运算: and, or, not

使用函数

SassScript 定义的函数

代码语言:javascript
复制
p {
  color: hsl(0, 100%, 50%);
}
// 编译为:
p {
  color: #ff0000; 
}
关键词参数
代码语言:javascript
复制
p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

插值语句 #{}

代码语言:javascript
复制
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
控制语句

@if

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

@for

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

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

代码语言:javascript
复制
@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
代码语言:javascript
复制
$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 输出方式删除所有无意义的空格、空白行、以及注释,力求将文件体积压缩到最小,同时也会做出其他调整,比如会自动替换占用空间最小的颜色表达方式。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-04-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 快速使用
    • 1. 使用变量
      • 2. 嵌套规则
        • 3. 导入SASS文件
          • 5. 混合@mixin
            • 6. 继承@extend
            • Sass补充
              • 数据类型:
                • 运算:
                  • 使用函数
                    • 关键词参数
                    • 插值语句 #{}
                      • 控制语句
                        • 输出格式
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档