[Sass常见用法] Css代码的Sass打开方式

Sass

Sass是什么(英文全称:Syntactically Awesome Stylesheets)

• 世界上最成熟、最稳定、最强大的专业级CSS扩展语言！(官网介绍)

• Sass 是层叠样式表语言,是 CSS 扩展语言

• Sass 文件后缀为 .scss

• 语法和代码格式跟 CSS 很相似,但浏览器并不支持 Sass 代码,需要编译为css文件

为什么使用 Sass

• Sass 扩展了 CSS3，增加了变量、css嵌套规则、混合器、继承等等特性
• 弥补了css代码无法实现复用,无法嵌套的缺点,提高代码编写效率
• 进行样式管理, 生成格式化的 CSS 代码，易于组织和维护
• 作为一个代码压缩工具,输出为压缩型代码,减少CSS文件体积，提高编译效率

以上介绍不能具体体现scss的优点,具体我们先看实例两个实例

数组

利用数组存储多个颜色,索引起始为1

$myColor: #1d1d1d #fff #ffae78 #62c500 #4b97e2;
.box{
	background: nth($myColor,1); /*#1d1d1d*/
	color: nth($myColor,6);
}

混合器

使用类似于函数

/*定义混合器宽高*/
@mixin wh($w,$h){
	width: $w;
	height: $h;
}
div{
    @include wh(300px,200px);/*传参调用*/
}

sass安装及用法实例

sass的安装

• sass基于Ruby语言开发而成，因此安装sass前需要先安装Ruby

• sass详细安装过程及配置参考官方或其他教程,这里不再累述

• 打开cmd依次输入以下命令：ruby -v ,sass -v 都出现版本号即安装成功

在开发软件中使用sass

• 这里以HBuilder为例介绍,依次按照步骤
  
  

最后重启软件就可以在sass文件里右键使用编译命令了

• 注意:浏览器并不支持 Sass 代码,需要把编译后的css引入html

文件整合

• 使用 @import 命令导入文件

  在此文件下编译把多个 SCSS 文件的代码整合为一个 custom.css文件

/*custom.scss文件下*/
@import "public.scss";
@import "indexstyle"; /*可以不写后缀*/ 

• 整合后代码输出风格

展开输出 expanded： 正常模式
紧凑输出 compact 一行一行的输出
压缩输出 compressed 去掉所有换行和空格

嵌套输出 nested (跟展开输出差不多, } 位置在行末)

例如压缩输出 compressed

• 打开sass插件配置,修改配置

  修改代码输出路径及风格

"--output-style",
"compressed"

注释

• Sass中有单行注释 //和多行注释/* */两种

• 编译之后单行注释不会保留,多行注释会保留

• 多行注释在压缩编译的时候,也不会被保留, 在第一个字符写 感叹号! 可强制保留

@charset "utf-8"; /*中文注释时不写会报错*/
/*!
强制保留
*/

Sass 变量

变量用于存储一些信息，实现代码重复使用

Sass 变量可以存储以下信息：

• 字符串
• 数字
• 颜色值
• 布尔值
• 列表
• null 值

Sass 变量使用 $ 符号 格式: $var:value

!global表示全局作用域, !default 默认值

$mFont: Helvetica,Arial, Verdana;
$mColor: red;
$mFontSize: 16px;
$mWidth: 200px;

body {
  font-family: $mFont;
  font-size: $mFontSize;
  color: $mColor;
}

div {
  $mColor:blue !global;  / * !global表示全局作用域*/
  color: $mColor;/*blue*/
  width: $mWidth;
}

$color: red !default; /*!default会使用已有的 $color 默认值*/

全局变量可以定义在同一个文件用 @import 来导入

嵌套提高书写效率

/*sass*/
.nav{
	ul{
		color: #000;
	}
	li{
		background: #ffaa7f;
	}
}
/*编译输出css*/
.nav ul {
  color: #000; }

.nav li {
  background: #ffaa7f; }

/* 属性嵌套*/
{
  font: {
  	size: 18px;
    weight: bold;}
}
/*输出*/
{
  font-size: 18px;
  font-weight: bold;
}

@extend 继承提高代码复用率

.box {
	height: 100px;
	width: 100px;
	background: #ffaa00;
}

.box1 {
	@extend .box; /* 继承 .box 的样式*/
	color: #000;
}

.box2 {
	@extend .box;
	color: #ffff7f;
}
/* 输出*/
.box, .box1, .box2 {
  height: 100px;
  width: 100px;
  background: #ffaa00; }

.box1 {
  color: #000; }

.box2 {
  color: #ffff7f; }

其他详细使用方法请参考sass官方教程