资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Sass 学习笔记

Sass 学习笔记

lingdududu / 2589人阅读

摘要：有利于版权等关键信息的保留。变量后加上则变为全局变量。字符串运算符根据左边的字符判断最终结构是否有引号。若使用，则两个类必须同时使用，增加维护负担。一组重用的使用引入，可携带参数。

1. 什么是Sass 
css预处理器，帮助你书写更简单、可维持的css。
2. Sass的特征

变量（variable）帮助你存储需要重复使用的值；

嵌套（nesting）让你书写更少的选择器；

partials(_base.scss) 和@import让你的CSS更加模块化，并且编译为一个css文件，减少http请求；

Mixin 让你创建一组可重复使用的CSS声明，每次使用只需要@inclue，并且可使用变量自定义值；

Extend共享一组css规则，使css更简洁；

运算符：方便运算

3. Sass语法 3.1. 嵌套规则

普通嵌套

应用场景：避免重复书写父元素，让复杂嵌套书写更简单

&指代父元素

应用场景：    父元素有其他用法
比如伪类；在其他元素有class时给父元素样式

命名空间：

应用场景： 减少background, font这种复合元素分开写的重复
#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; }
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
    &-sidebar { border: 1px solid; }
}

===========&指代父元素==========================

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }
a-sidebar { border: 1px solid; }
.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

============命名空间==========================

.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}
3.2 注释

/* */为多行注释;//单行注释。多行注释在输出时会保留，单行注释不会。

多行注释以!开头，即使在压缩模式下也会被保留。有利于版权等关键信息的保留。

3.3 SassScript

变量

应用场景： 多次使用某个值
以$开头，在某个嵌套内部声明的变量只能在该内部使用，之外的变量则为全局变量。变量后加上!global则变为全局变量。

数据类型
1.数字、字符串（有无“”）、颜色、布尔值、null、list（用空格或都好隔开）， map(键值对)

2.#{}内的字符串解析时会去掉引号；
3.nth(list/map, index)获取第几项，从1开始；
4.join(list1, list2, seperator)：合并为一个新的list
5.append(list1, list2, seperator)：返回新的list

运算符
1./：在作为变量、函数、不是list的括号内、与其他运算符一起时进行除法运算，其余情况作为普通的css.

2.-：作为减法，尽量两边有空格，负号运算符在前面有空格，作为list最好用括号包围。
3.颜色运算符：分段运算(# 01|02|03)， 对于透明度，有opacity(color, alpha), transparentize(color, alpha)。
4.字符串运算符：根据左边的字符判断最终结构是否有引号。
5.布尔运算符（and, or, not）
6.list不支持运算符，请使用函数

变量默认值!default：当变量未被赋值时，使用!default的值,!default的值不能重定义；

3.4 @-rules 和指令

@import: 引入其他文件。并且会将引入的文件也编译到最后的文件中。import文件中的变量,mixin也可在主文件中使用。

应用场景：样式的模块化；减少Link请求数量
=== example.sass ====
.example {
  color: red;
}    

=== main.sass === 
#main {
  @import "example";
}

==== compiled to ====
#main .example {
  color: red;
}
- 引入多个文件
`@import ‘base’, ‘test’`

@media

应用场景：媒体查询时不用重复写选择器
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
=== Compiled to  === 
.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

==== Compiled to ===
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
=== Compiled to ===
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

在不同的选择器中写同一套媒体查询怎么解决？
什么时候用#{}, 什么时候用变量？

@extend

应用场景：一个类需要另一个类的全部css样式时。比如bootstrap中的btn, btn-success。若使用html，则两个类必须同时使用，增加维护负担。

@at-root：让嵌套里的元素，使用在文件最外层。打破嵌套规则。@at-root(with/widthout)让元素在指令之外。

调试：

@debug: 输出sassScript结果；

@warning: 控制用户输入变量等，可用—quiet关掉

@error 输出错误

3.5 条件控制

if(boolean, trueValue, falseValue):

@if：条件满足时使用样式，比如导航active就colour：green；

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

@for $i from start to/through end:through包括end, to不包括，$i可在循环中使用。

@each in list/map

@mixin一组重用的css, 使用@include引入，可携带参数。

@include里的内容会应用在mixing中的@content的位置。

@content中的变量只在@content的中块中使用，否则解析为全局变量

3.6 函数

function

@function name (param) {
     @retutn
}
3.7 产出css

—nested: 产出嵌套的css;

—expanded:常写的css， 无嵌套;

—compat:一个选择器一行；

—compressed:所有的都写在一行；

服务器托管 混合云 学习笔记 学习笔记一 基础学习笔记 深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115479.html

相关文章

  • 学习笔记 - Sass的安装与使用手册

    摘要：现在将学习笔记整理在这里，供大家参考。的安装的编辑器安装方法有很多，大致能分为两种应用程序和命令行界面。如果已经安装过，也可以使用指令如果提示权限不足，在命令行前加上即可。参考网页编辑器的使用的使用很简单，记住两条指令即可。 最近因为工作需要，自学了Sass。现在将学习笔记整理在这里，供大家参考。 1. Sass的安装 Sass的编辑器安装方法有很多，大致能分为两种：应用程序（appl...

    Jeff 评论0 收藏0

  • sass学习笔记--混合宏

    摘要：申明混合宏不带参数混合宏在中，使用来声明一个混合宏。如其中是用来声明混合宏的关键词，有点类似中的一样。是混合宏的名称。 什么时候使用混合宏 如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。...

    Wildcard 评论0 收藏0

  • SASS 学习笔记

    摘要：中的变量以开头。中的引入文件以下划线开头，在其它文件中引用时，用命令即可，引用时不需要带文件名开头的下划线和扩展名。导入本身就提供了导入的选项，这样就将进一步分割成了代码更少更容易维护的代码段，但是在中每一条语句都会产生一次请求。 基础知识 这部分内容摘自 Sass Basics。 预处理 Preprocessing 预处理功能，就是将 SASS/SCSS 格式的文件输出为 CSS 文...

    ?xiaoxiao, 评论0 收藏0

  • SCSS学习笔记（一）

    摘要：的由来就是加强版的，要讲那就一定要从讲起英文全称是一个最初由设计并由开发的层叠样式表语言。年发行，年版本稳定，设计和开发分开进行，让这个语言的功能相当完善。变量允许使用变量，所有变量以开头。 SCSS的由来 SCSS就是加强版的CSS，要讲SCSS那就一定要从SASS讲起 SASS Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Ha...

    simpleapples 评论0 收藏0

  • Laravel学习笔记三-前端工作流

    摘要：本节将学习是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令来强制安装所有模块，不管该模块之前是否安装过由于国内墙的原因，使用安装会非常缓慢，慢到想切，不过还好，我们可以使用淘宝提供的国内镜像进行下载。 本节将学习 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。 一、句法强大的样式表Sass Sass 是一种可用于编写CSS的语言...

    liuchengxu 评论0 收藏0

  • 我的webpack学习笔记（二）

    前言 上一篇文章我们讲了多页面js的打包，本篇文章我们继续scss的打包。 多页面css单独打包 首先，我们css编写采用的是sass，所以我们先来安装sass-loader以及可以用到的依赖 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安装完loaders，下面在webpack.config.js...

    mcterry 评论0 收藏0

发表评论

登陆后可评论

0条评论

lingdududu

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<