文档章节

Sass 简介

凌兮洛
 凌兮洛
发布于 11/15 13:10
字数 919
阅读 9
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

概念

Sass由hampton catlin设计,natalie weizenbaum于2006年开发,它可以免费下载和使用。

Sass是一个将脚本解析成CSS的脚本语言(SassScript),也是一款CSS预处理器,它减少了CSS的重复,也因此节省了时间。

Sass 是对CSS3(层叠样式表)的语法的一种扩充 Sass ,扩展了 CSS3,增加了规则、变量、混入、选择器、继承等属性,生成了良好的格式化CSS代码,便于代码的维护和组织。

功能

  • 完全兼容 CSS 的所有版本
  • 增加了变量、嵌套、混合等功能
  • 通过函数进行颜色值与属性值的运算
  • 提供了控制指令(control directives)
  • 自定义输出格式

语法格式

Sass 有两种语法格式:SCSS(Sassy CSS,较新的语法)和缩进语法(最开始的叫法)。

前者支持大多数 CSS hacks 写法以及浏览器前缀写法,以及早期的IE 滤镜写法,这种格式以 .scss 作为扩展名;后者简称 Sass,是一种简化格式,与 Haml 类似,使用缩进代替花括号来区分代码(属性表示某个选择器)并用换行代替分号分隔属性,用回车将不同规则分隔开,这样相对来说它比 SCSS 更容易阅读且书写也较为快速,它以 .sass 作为扩展名。

Sass使用情况

浏览器是不理解sass代码的,因此我们将需要一个sass预处理器来将sass代码转换为标准css,这个过程称为运输。所以,我们需要给一个transpiler(某种程序)一些sass代码,然后得到一些css代码。

提示:transpiling是一个术语,用于将用一种语言编写的源代码转换/翻译成另一种语言。

Sass文件类型:Sass文件的扩展名为 .scss

Sass评论:Sass支持标准 CSS 注释 /*comment*/,此外还支持内联注释 //comment

    /* 定义原色 */
    $defColor1: #f44586;
    $defColor2: green;
    
    /* 使用变量 */
    .main_use{
        background: $defColor2;  //在这里我们可以设置内联注释
    }

增加特性

  • 变量 Sass支持定义变量,变量以美元符号($)作为开头,用冒号(:)赋值。 支持四种数据类型:
    • 字符串
    • 数值
    • 布尔类型
    • 颜色 变量可以用作函数的参数或者是返回值,在解释的过程中,解释器会把变量的值写入最终的CSS文件中。
  • 嵌套(Nesting) SCSS 支持嵌套并且支持代码块的嵌套(CSS支持嵌套但不支持代码块的嵌套),它可以清晰的表示元素之间的关系。
  • 导入(@import) Sass 支持@import 指令,该指令允许我们将一个文件的内容包含在另一个文件中,该指令包含CSS文件,因此不需要额外的调用HTTP,而由于性能问题,CSS指令每次调用都会创建一个额外的HTTP,在这里Sass就没有这样的问题。
  • 混入(mixin) Mixin包含一段合法Sass代码,类似于C语言的宏定义;解释器在调用mixin时会将它扩展成它所包含的完整Sass代码,可以有效的减少代码重复,从而写出的代码更加干净简洁。
  • 继承(@extend) 该指令允许我们将一组CSS属性从一个选择器共享到另一个选择器。

© 著作权归作者所有

上一篇: Sass 安装
下一篇: 父选择器
凌兮洛
粉丝 2
博文 89
码字总数 86131
作品 0
长沙
私信 提问
Sass和LESS-动态CSS技术

一、简介 二、Sass/Scss的使用 变量 注释 中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写,以及简单的样式说明。但是,你也并不希望每个浏览网站源码的人都能看到所...

dhb_oschina
2016/05/17
125
0
腾讯 Web UI 解决方案 QMUI Web 正式回迁开源

项目简介 QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。由腾讯广研 QMUI 团队出品。框架主要由一个丰富的 Sass 方法合集与内置的工作流构成。通过 QMUI Web...

kayo5994
2017/08/25
4.3K
6
Ghost 主题--Vno

是一个从 Dale Anthony 的 Uno 派生出的 Ghost 主题。它遵从简洁和响应式的设计风格,拥有一个独立的封面,易于集成的 Disqus 评论系统,字体图标以及多种颜色。 我在原来的基础上对一些预料...

叶秀兰
2015/05/05
1K
0
Sass Mixin 和 Media Merging

如果你对 Sass不太熟悉的话,你可能不知道Sass增加了许多非常有趣的功能,例如媒体查询(即 @media)功能(经常被成为 Media Merging媒体合并)。 在向你解释什么是Media Merging之前,你应该...

力谱宿云
2016/11/01
311
0
使用webpack配置一个小型vue-cli脚手架

简介 使用vue的朋友都是知道vue-cli,他是一个基于webpack的vue脚手架,通过vue-cli配置好一整套环境可以更快的开发,从而提高了工作效率。而我们可以学习它的一些配置可以熟悉webpack的构建...

juststart_LIC
09/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

采购单品汇总_华南.xlsx

import pandas as pdimport matplotlib.pyplot as pltimport matplotlib as mp1mp1.rcParams["font.family"] = "STFangsong"# 加载《销售》表数据df1 = pd.read_excel(r"C:\Us......

龙玉滕
今天
5
0
OSChina 周五乱弹 —— 一次四千 要4次还能多给一千

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐# 分享金志文的单曲《远走高飞》: 版权又回来了现在听歌得好几个软件 《远走高飞》- 金志文 手机党少年们...

小小编辑
今天
7
0
Spring Cloud Alibaba 实战(十) - Spring Cloud GateWay

> 本文主要内容是:为什么要使用网关,整合Gateway,Gateway核心学习:Route,Predicate,Filter,最后使用Gateway聚合微服务请求 先总结至此的架构 1 网关的价值 不使用网关行嘛? 各个请求直接打在...

JavaEdge
今天
4
0
【CKB.DEV 茶话会】第二期:聊聊 CKB 钱包和 Nervos DAO 全流程

CKB.DEV 茶话会第二期:聊聊 CKB 钱包和 Nervos DAO 全流程 为了鼓励更多优秀的开发者和研究人员参与到 CKB 的开发和生态建设中去,我们希望组织一系列 CKB Developer Seminar(CKB.DEV 茶话...

NervosCommunity
今天
4
0
聊聊rocketmq的HAClient

序 本文主要研究一下rocketmq的HAClient HAClient rocketmq-all-4.6.0-source-release/store/src/main/java/org/apache/rocketmq/store/ha/HAService.java class HAClient extends Serv......

go4it
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部