素材巴巴 > 程序开发 >

Sass简介安装编译语法

程序开发 2023-09-10 16:02:50

一、sass简介

CSS作为层叠样式表,是一种静态语言。CSS不是一个编程语言,我们可以用它来开发网页样式,但是没有办法用它进行编程。但SASS的出现,让CSS实现了通过代码编程来实现的方式。

SASS是一种CSS开发工具,提供了许多便利的写法,让CSS的处理实现了可编程处理。

SASS扩展了CSS3,增加了规则、变量、混入、选择器、继承等等特性,可以生成风格良好的CSS样式表文件,易于组织和维护。

二、sass安装

官方文章:sass中文网安装

查看版本信息,下图说明安装成功:
在这里插入图片描述

安装流程:

1、安装Ruby。sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby,安装过程中请注意勾选 Add Ruby executables to your PATH 添加到系统环境变量。(注:mac下自带Ruby无需在安装Ruby!)

2、终端测试安装是否成功:ruby -v

3、如上已经安装成功。但因为国内网络的问题导致gem源间歇性中断,因此我们需要更换gem源,更换成国内服务器上的。

//1.删除并替换原gem源
 gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org///2.打印是否替换成功,该命令可以查看gem源
 gem sources -l
 结果打印:https://gems.ruby-china.com      ( 确保只有 gems.ruby-china.com )
 

4、安装sass:gem install sass 接着执行 gem install compass
安装完成之后,通过运行下面的命令来确认应用已经正确地安装到了电脑中(例如):

sass -v
 结果打印:Sass 3.x.x (Selective Steve)compass -v
 结果打印:Compass 1.x.x (Polaris)
 

5、sass更新、查看版本、sass命令帮助:

//更新sass
 gem update sass//查看sass版本
 sass -v//查看sass帮助
 sass -h
 

注意:Compass是Sass的工具库(toolkit)。

   Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能

参考文档:sass-compass之一

三、sass编译

参考文档:SASS用法指南 阮一峰

官方文档:编译sass sass中文网

sass编译有很多种方式,如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。

SASS文件的后缀名有两种方式,.sass要求更严谨规范的语法不需要分号和大括号,而.scss可以有分号和大括号使用起来更简便。

所以我们一般使用.scss文件。

1、命令行编译:

//在屏幕上显示.scss文件转化的css代码(假设文件名为output)
 sass test.scss//单文件转换命令
 sass input.scss output.css//单文件监听命令(一旦源文件有变动,就自动生成编译后的版本)
 sass --watch input.scss:output.css//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
 sass --watch app/sass:public/stylesheets
 

2、SASS提供四个编译风格的选项:(四种编译排版演示链接上方官方文档)

生产环境当中,一般使用最后一个选项:sass --style compressed test.sass test.css
  
选择编译格式并添加调试map:
sass --watch input.scss:output.css --style compressed --sourcemap

–style表示解析后的css是什么排版格式;
–sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。
另外还有一个 --debug-info,开启debug信息,不常用。

3、其他编译方式: 软件编译,比如koala&codekit、Live Sass编译器(VSCode扩展)
有篇文章:Visual Studio Code插件Live Sass Compiler可将Sass或Scss实时编译为CSS

四、语法

官方文档1:Sass中文网 快速入门
官方文档2:Sass中文网 中文文档

简单使用:阮一峰的网络日志

另附语:
@charset "utf-8"  //sass文件里,想要写中文必须加字符集 “utf-8” 声明,不然会报错。
sass文件中,变量的赋值只是单纯的文本替换,跟css中的属性值的写法基本一样。


标签:

上一篇: 大前端 - react - mobx6更新 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。