当前位置:Gxlcms > html代码 > CSS强化装备!Sass整理笔记_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:34人阅读

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

    以上,欢迎拍砖斧正。

    人气教程排行