目录
Sass 是什么?
Sass 和 SCSS 有什么区别?
为什么选择 Sass?
安装
ruby 安装
sass 安装
淘宝 RubyGems 镜像安装 Sass
编译
基本语法
1.变量
2.嵌套
3.导入
4.mixin
5.扩展/继承
6.运算
7.颜色
8.注释
管理Sass项目文件结构
gulp-ruby-sass 与 gulp-sass
More
首页 web前端 html教程 CSS 强化装备!Sass 整理笔记_html/css_WEB-ITnose

CSS 强化装备!Sass 整理笔记_html/css_WEB-ITnose

Jun 24, 2016 am 11:34 AM

Sass 是什么?

Sass 是 Syntactically Awesome Style Sheets 的缩写,它是CSS的 一个开发工具,提供了很多便利和简单的语法,让CSS看起来更像是一门语言,这种特性也被称为“CSS预编译” 。它的主要涉及思想是让我们可以按照编程的思路编写自己的样式,然后通过“编译器”生成我们所需要的CSS文件。

官网

Sass 和 SCSS 有什么区别?

Sass 和 Scss 其实是同一种东西,我们平时都称之为 Sass,两者不同之处有以下两点:

  • 文件扩展名不同
    Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名;

  • 语法书写方式不同
    Sass 是以严格的缩进式语法规则来书写,不带大括号“{}”和分号“;”,而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

  • PS:本文只讨论 SCSS。

    SCSS 与 Sass 异同 - Sass 中文文档

    为什么选择 Sass?

    “LESS 要靠 JavaScript 解析,我不喜欢这种做法。另外,LESS 的变量用 @ 表示,我也不太习惯。” by 阮一峰

    SASS用法指南 - 阮一峰

    Sass、LESS 和 Stylus 简单对比

    • 三者都是开源项目;

    • Sass 诞生是最早也是最成熟的 CSS 预处理器,有 Ruby 社区和 Compass 支持;Stylus 是早期服务器 NodeJS 项目,在该社区得到一定支持者;Less 出现于2009年,支持者远超远于 Ruby 和NodeJS社区;

    • Sass 和 LESS 语法较为严谨、严密,而Stylus语法相对散漫,其中 LESS 学习起来更快一些,因为他更像CSS的标准;

    • Sass 和 LESS 相互影响较大,其中 Sass 受 LESS 影响,已经进化到了全面兼容 CSS 的 SCSS;

    • Sass 和 LESS 都有第三方工具提供转译,特别是 Sass 和 Compass 是绝配;

    • Sass、LESS 和 Style 都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性,而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”成为五大基本特性,各自特性实现功能基本形似,只是使用规则上有所不同;

    • Sass 和 Stylus 具有类似于语言处理的能力,比如说条件语句、循环语句,而 LESS 需要通过 When 等关键词模拟这些功能,在这一方面略逊一筹。

    CSS 预处理的缺点

    • 个人感觉CSS 预处理器语言那是程序员的玩具,想通过编程的方式跨界解决 CSS 的问题。可以说 CSS 应该面临的问题一个也少不了,只是增加了一个编译过程而已,简单来说 CSS 预处理器语言较 CSS 玩法变得更高级了,但同时降低了自己对最终代码的控制力。更致命的是提高了门槛,首先是上手门槛,其次是维护门槛,再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。

    CSS预处理器——Sass、LESS和Stylus实践【未删减版】 - W3CPlus - 2013-03-13

    我选择 Sass 的原因:

  • Sass也是成熟的 CSS 预处理器之一,而且又有一个稳定,强大的团队在维护;

  • Sass对于我来说参考的教程多;

  • Sass有一些成熟稳定的框架,特别是 Compass,新秀还有 Foundation 之类;

  • 还有一个原因是国外讨论 Sass 的同行要多于 LESS。

  • 出于这几个原因,我想我学习或者使用 Sass 更容易一些,碰到问题更有参考资料,更有朋友帮忙解决。

    该使用 SASS 还是 LESS? - 大漠 - 知乎 - 2014-07-04

    安装

    Sass 是 Ruby 语言写的,但是两者的语法没有关系。不懂 Ruby,照样使用。不过必须要先安装 Ruby,然后再安装 Sass。

    ruby 安装

    先从官网下载并安装 ruby,在安装的时候,请勾选 Add Ruby executables to your PATH 这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到 ruby 环境。

    Downloads - 官网

    sass 安装

    安装完 ruby 之后,在开始菜单,找到刚才安装的 ruby,打开Start Command Prompt with Ruby

    然后直接在命令行输入:

    gem install sass
    登录后复制

    按回车键确认,等待一段时间就会提示你 Sass 安装成功(如果因为墙的原因安装失败,请参考下面用淘宝 RubyGems 镜像安装 Sass)。

    淘宝 RubyGems 镜像安装 Sass

    由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。
    这时候我们可以通过source命令来配置源,先移除默认的https://rubygems.org源:

    gem source --remove https://rubygems.org/
    登录后复制

    然后添加淘宝的源https://ruby.taobao.org/:

    gem source -a https://ruby.taobao.org/
    登录后复制

    然后查看一下当前使用的源是哪个,如果是淘宝的,则比表示可以输入 Sass 安装命令gem install sass了。

    最后使用版本查看命令确保安装成功:

    sass -v
    登录后复制

    Sass 安装 - W3CPlus

    编译

    SASS 文件就是普通的文本文件,里面可以直接使用 CSS 语法。文件后缀名是 .scss,意思为 Sassy CSS。

    新建一个 test.scss 文件,内容为:

    $blue : #1875e7;div{    color: $blue;}
    登录后复制

    然后在命令行输入下面命令,屏幕上便显示 .scss 文件转化的 css 代码:

    sass test.scss
    登录后复制

    如果要将显示结果保存成文件,后面再跟一个 .css 文件名:

    sass test.scss test.css
    登录后复制

    那么就会默认在当前目录下生成文件。

    Sass 提供四个编译风格的选项:

    • nested: 嵌套缩进的css代码,它是默认值;

    • expanded: 没有缩进的、扩展的css代码;

    • compact: 简洁格式的css代码;

    • compressed:压缩后的css代码。

    生产环境当中,一般使用最后一个选项。

    sass --style compressed test.scss test.min.css
    登录后复制

    你还可以让 Sass 监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

    // 监听文件// input.scss : scss文件// output.css : 编译后的css文件sass --watch input.scss:output.css// 监听目录 // sassFileDirectory : sass文件目录// cssFileDirectory : 编译后的css文件目录sass --watch sassFileDirectory:cssFileDirectory
    登录后复制

    Sass 编译 - W3CPlus

    Sass 的官方网站还提供一个在线转换器,方便尝试运行各种栗子:

    SassMeister | The Sass Playground!

    基本语法

    1.变量

    Sass 中可以定义变量,方便统一修改和维护。

    //sass style//-----------------------------------$gray: #666;body {  background-color: $gray;}//css style//-----------------------------------body {  background-color: #666; }
    登录后复制

    2.嵌套

    Sass 可以进行选择器的嵌套,表示层级关系。

    //sass style//-----------------------------------ul {        li {        display: inline-block;    }}//css style//-----------------------------------ul li {  display: inline-block; }
    登录后复制

    3.导入

    Sass 中如导入其它sass文件,最后编译为一个css文件,优于纯css的@import。

    //sass style//-----------------------------------// reset.scsshtml,body,ul,ol {    margin: 0;    padding: 0;}//sass style//-----------------------------------// test.scss@import 'reset';body {    font-size: 100%;    background-color: #efefef;}//css style//-----------------------------------html,body,ul,ol {  margin: 0;  padding: 0; }body {  font-size: 100%;  background-color: #efefef; }
    登录后复制

    4.mixin

    Sass 中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。从此处理 CSS 3 的前缀兼容轻松便捷。

    //sass style//-----------------------------------@mixin box-sizing ($sizing) {    -webkit-box-sizing: $sizing;       -moz-box-sizing: $sizing;           -box-sizing: $sizing;}.box-border {    border: 1px solid #ccc;    @include box-sizing(border-box);}//css style//-----------------------------------.box-border {    border: 1px solid #ccc;    -webkit-box-sizing: border-box;       -moz-box-sizing: border-box;           -box-sizing: border-box; }
    登录后复制

    5.扩展/继承

    Sass 可通过 @extend 来实现代码组合声明,使代码更加优越简洁。

    //sass style//-----------------------------------.bar-left {    border: 1px solid #ccc;}.bar-right {    @extend .bar-left;    color: #999;}//css style//-----------------------------------.bar-left, .bar-right {    border: 1px solid #ccc; }.bar-right {    color: #999; }
    登录后复制

    6.运算

    Sass 可进行简单的加减乘除运算等。

    //sass style//-----------------------------------$defaultFontSize: 10px;.msg {    position: absolute;    top: (800px/2);    left: 200px + 200px;    font-size: $defaultFontSize * 2;}//css style//-----------------------------------.msg {    position: absolute;    top: 400px;    left: 400px;    font-size: 20px; }
    登录后复制

    7.颜色

    Sass 中集成了大量的颜色函数,让变换颜色更加简单。

    //sass style//-----------------------------------$linkColor: #08c;a {    text-decoration: none;    color: $linkColor;    &:hover {        color: darken($linkColor, 10%);    }}//css style//-----------------------------------a {    text-decoration: none;    color: #08c; }a:hover {    color: #006699; }
    登录后复制

    8.注释

    Sass 共有两种注释风格。

    • 标准的 CSS 注释 /* comment */,会保留到编译后的文件

    • 单行注释 // comment,只保留在 SASS 源文件中,编译后会被省略。

    提示:在/*后面加一个感叹号,表示这是“重要注释”。即使是压缩模式编译,也会保留这行注释。通常可以用于声明版权

    /*!    重要注释!*/
    登录后复制

    管理Sass项目文件结构

    CSS 预处理器的特点之一是可以把你的代码分割成很多文件,而且不会影响性能。这都归功于 Sass 的@import命令,只要在你的开发环境下,你调用不管多少文件,最终将编译出一个 CSS 样式文件。

    管理 Sass 项目文件结构 - 大漠 - W3CPlus

    gulp-ruby-sass 与 gulp-sass

    • gulp-ruby-sass 是调用 sass,所以需要 ruby 环境,需要生成临时目录和临时文件;

    • gulp-sass 是调用 node-sass,有 node.js 环境就够了,编译过程不需要临时目录和文件,直接通过 buffer 内容转换。

    gulp-ruby-sass与gulp-sass - SegmentFault

    More

    sass入门 - sass教程
    sass|博客自由标签|W3CPlus
    Sass->十分钟写一个Sass组件 - SegmentFault
    使用Sass来写OOCSS - SegmentFault

    以上,欢迎拍砖斧正。

    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    HTML容易为初学者学习吗? HTML容易为初学者学习吗? Apr 07, 2025 am 12:11 AM

    HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

    HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

    HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

    HTML中起始标签的示例是什么? HTML中起始标签的示例是什么? Apr 06, 2025 am 12:04 AM

    AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

    了解HTML,CSS和JavaScript:初学者指南 了解HTML,CSS和JavaScript:初学者指南 Apr 12, 2025 am 12:02 AM

    WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

    网页批注如何实现Y轴位置的自适应布局? 网页批注如何实现Y轴位置的自适应布局? Apr 04, 2025 pm 11:30 PM

    网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能,特别是如何处理批注之间的间�...

    Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Apr 04, 2025 pm 11:54 PM

    GiteePages静态网站部署失败:404错误排查与解决在使用Gitee...

    HTML,CSS和JavaScript:Web开发人员的基本工具 HTML,CSS和JavaScript:Web开发人员的基本工具 Apr 09, 2025 am 12:12 AM

    HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

    如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? 如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? Apr 05, 2025 am 06:15 AM

    实现图片点击后周围图片散开并放大效果许多网页设计中,需要实现一种交互效果:点击某张图片,使其周围的...

    See all articles