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

文章目录

Sass
- Sass是什么(英文全称:Syntactically Awesome Stylesheets)
- 为什么使用 Sass
- 数组
- 混合器
sass安装及用法实例
- sass的安装
- 在开发软件中使用sass
- 文件整合
- 注释
- Sass 变量
- 嵌套提高书写效率
- @extend 继承提高代码复用率

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官方教程

[Sass常见用法] Css代码的Sass打开方式相关推荐

CSS---引入CSS代码的四种方式
1.内联方式内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS. <div style="background: red"></div&g ...
CSS 垂直居中的正确打开方式
点击上方关注前端技术江湖,一起学习,天天进步 web-css-gaoji-jichu.jpeg 前言之爆锤面试官神器 - CSS 无论是实际开发中,亦或者是求职面试中,css 垂直居中往往都是一个绕 ...
CSS预处理器sass和less
文章目录 CSS预处理器什么是CSS预处理器 Sass和LESS背景介绍 Sass背景介绍 LESS的背景介绍 Sass 安装Sass 下载Ruby安装文件安装Ruby 安装Sass 编译Sass ...
css预处理器sass/scss入门
sass/scss入门一.css预处理器是什么? 二.为什么要用css预处理器? 三.sass.less.stylus的区别? 四.sass与scss 五.sass安装六.sass常见用法 6.1 ...
css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
CSS预处理器——Sass、LESS和Stylus区别及联系
一.什么是CSS预处器 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.通俗的说 ...
wordpress修改css样式的方法,在WordPress中添加自定义CSS代码的几种方法
在定制WordPress站点时,除了可以使用主题的选项调整外,CSS代码也是我们常用到的一种方法,不管是修改样式.调整距离还是隐藏特定元素,我们都可以用CSS来完成,而且很多时候主题没有的功能,你询问 ...
python中的文件打开方式
r: 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb: 以二进制格式打开一个文件用于只读.文件指针将会放在文件的开头.这是默认模式. r+: 打开一个文件用于读写.文件指针将会 ...