Sass(Scss)学习
目录
Sass(Scss)是什么
嵌套
变量
四则运算
条件分支
循环处理
列表处理
函数
混入(mixin)
继承
导入文件
Sass内置函数
String(字符串) 函数
数字函数
列表(List)函数
Map(映射)函数
选择器函数
颜色函数
颜色设置
颜色获取
颜色操作
Sass(Scss)是什么
Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。
Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
Sass 完全兼容所有版本的 CSS。
Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass 文件后缀为 .scss。
嵌套
Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则
.box {width: 200px;height: 200px;background-color: aquamarine;p {font-size: 8px;margin: 10px;a {text-decoration: none;// 在嵌套结构中使用&时，指代其父元素的选择器&:hover {font-weight: bold;}}}}很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。
在 Sass 中，我们可以使用嵌套属性来编写它们：
font: {family: Helvetica, sans-serif;size: 18px;weight: bold;}text: {align: center;transform: lowercase;overflow: hidden;}变量
变量用于存储一些信息，它可以重复使用。
Sass可处理的数据类型（数字、字符串、布尔、颜色、列表、null ）
$baseFontSize: 12px;.box {p {font-size: $baseFontSize;}}// 处理字符串// 字符串内使用#{}计算表达式的值$imgDir: "../img/";.box {background: url("#{$imgDir}test.jpg");}// 处理颜色$brandColor: rgba(255,0,0,0.9);.box {p {color: $brandColor;// 使用Sass内置函数color: lighten($brandColor, 30%);}}变量的作用域只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 green，p 标签则是为 red。
$myColor: red;h1 {$myColor: green; // 只在 h1 里头有用，局部作用域color: $myColor; // green}p {color: $myColor; // red}可以使用 !global 关键词来设置变量是全局的
$myColor: red;h1 {$myColor: green !global; // 全局作用域color: $myColor; // green}p {color: $myColor; // green}四则运算
$baseFontSize: 12px;.box {p {font-size: $baseFontSize - 2;}}条件分支
// @if @else// 比较运算符：== != <> <= >=$debugMode: true;.box {@if $debugMode == true {color: red;} @else {color: green;}}循环处理
// @for// @while@for $i from 10 through 14 {.fs#{$i} {font-size: 10px;font-weight: bold;}}$i: 10;@while $i <= 14 {.fs#{$i} {font-size: #{$i}px;}$i: $i + 1;}列表处理
$animals: cat, dog, tiger;@each $animal in $animals {.#{$animal}-icon {background: url("#{$animal}.png");}}函数
全局变量在_gloabals.scss
函数在_functions.scss
像这样分开文件的话很容易管理
$totalWidth: 940px;$columnCount: 5;// 定义函数@function getColumnWidth($width, $count) {// 计算处理$padding: 10px;$columnWidth: floor($width - ($padding * ($count - 1)) / $count);@debug $columnWidth;@return $columnWidth;}.grid {float: left;// 使用函数width: getColumnWidth($totalWidth, $columnCount);}混入(mixin)
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。
// 定义@mixin round {border-radius: 4px;}.box {// 引用@include round;}// 定义带参数并有默认值的@mixin round($arg:4px) {border-radius: $arg;}.box {// 引用@include round(10px);}继承
@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。
.msg {font-size: 12px;font-weight: bold;padding: 2px 4px;color: white;}.errorMsg {@extend .msg;background: red;}.warningMsg {@extend .msg;background: orange;}导入文件
@import 指令可以让我们导入其他文件等内容。
CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。
Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。
包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。
@import "foo";下面情况的时候，可以导入.css文件
指定文件拓展名是 .css；
指定文件名以 http:// 开头；
指定文件名是 url()；
@import 包含 media queries。
@import "foo.css";@import "foo" screen;@import "http://foo.com/bar";@import url(foo);如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。
但是，在导入语句中我们不需要添加下划线。
_colors.scss 文件代码：
$myPink: #EE82EE;$myBlue: #4169E1;$myGreen: #8FBC8F;导入使用的代码：
@import "colors";body {font-family: Helvetica, sans-serif;font-size: 18px;color: $myBlue;}Sass内置函数
String(字符串) 函数
Sass 字符串的起始索引值从 1 开始，记住不是 0。
quote(string) 给字符串添加引号。
str-index(string, substring) 返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串，则返回 null。
str-insert(string, insert, index) 在字符串 string 中 index 位置插入 insert。
str-length(string) 返回字符串的长度。
str-slice(string, start, end) 从 string 中截取子字符串，通过 start-at 和 end-at 设置始末位置，未指定结束索引值则默认截取到字符串末尾。
to-lower-case(string) 将字符串转成小写
to-upper-case(string) 将字符串转成大写
unique-id() 返回一个无引号的随机字符串作为 id。不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性。
unquote(string) 移除字符串的引号
数字函数
abs(number) 返回一个数值的绝对值。
ceil(number) 向上取整
comparable(num1, num2) 返回一个布尔值，判断 num1 与 num2 是否可以进行比较
floor(number) 向下取整
max(number...) 返回最大值
min(number...) 返回最小值
percentage(number) 将数字转化为百分比的表达形式。
random() 返回 0-1 区间内的小数
random(number) 返回 1 至 number 之间的整数，包括 1 和 limit。
round(number) 返回最接近该数的一个整数，四舍五入。
列表(List)函数
append(list, value, [separator]) 将单个值 value 添加到列表尾部。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。
index(list, value) 返回元素 value 在列表中的索引位置。
is-bracketed(list) 判断列表中是否有中括号
join(list1, list2, [separator, bracketed]) 合并两列表，将列表 list2 添加到列表 list1 的末尾。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。 bracketed 默认会自动侦测是否有中括号，可以设置为 true 或 false。
length(list) 返回列表的长度
list-separator(list) 返回一列表的分隔符类型。可以是空格或逗号。
nth(list, n) 获取第 n 项的值。
set-nth(list, n, value) 设置列表第 n 项的值为 value。
zip(lists) 将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表。
Map(映射)函数
Sass Map(映射)对象是以一对或多对的 key/value 来表示。
Sass Map 是不可变的，因此在处理 Map 对象时，返回的是一个新的 Map 对象，而不是在原有的 Map 对象上进行修改。
map-get(map, key) 返回 Map 中 key 所对应的 value(值)。如没有对应的 key，则返回 null 值。
map-has-key(map, key) 判断 map 是否有对应的 key，存在返回 true，否则返回 false。
map-keys(map) 返回 map 中所有的 key 组成的队列。
map-merge(map1, map2) 合并两个 map 形成一个新的 map 类型，即将 map2 添加到 map1的尾部
map-remove(map, keys...) 移除 map 中的 keys，多个 key 使用逗号隔开。
map-values(map) 返回 map 中所有的 value 并生成一个队列。
选择器函数
is-superselector(super, sub) 比较两个选择器匹配的范围，即判断 super 选择器是否包含了 sub 选择器所匹配的范围，是的话返回 true，否则返回 false。
selector-append(selectors) 将第二个 (也可以有多个) 添加到第一个选择器的后面
selector-nest(selectors) 返回一个新的选择器，该选择器通过提供的列表选择器生成一个嵌套的列表。
selector-parse(selector) 将字符串的选择符 selector 转换成选择器队列
selector-replace(selector, original, replacement) 给定一个选择器，用replacement 替换 original 后返回一个新的选择器队列
selector-unify(selector1, selector2) 将两组选择器合成一个复合选择器。如两个选择器无法合成，则返回 null 值
simple-selectors(selectors) 将合成选择器拆为单个选择器
颜色函数
颜色设置
rgb(red, green, blue) 创建一个 Red-Green-Blue (RGB) 色。其中 R 是 "red" 表示红色，而 G 是 "green" 绿色，B 是 "blue" 蓝色。
rgba(red, green, blue, alpha) 根据红、绿、蓝和透明度值创建一个颜色。
hsl(hue, saturation, lightness) 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色。
hsla(hue, saturation, lightness, alpha) 通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。
grayscale(color) 将一个颜色变成灰色，相当于 desaturate( color,100%)。
complement(color) 返回一个补充色，相当于adjust-hue($color,180deg)。
invert(color, weight) 返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
颜色获取
red(color) 从一个颜色中获取其中红色值（0-255）。
green(color) 从一个颜色中获取其中绿色值（0-255）。
blue(color) 从一个颜色中获取其中蓝色值（0-255）。
hue(color) 返回颜色在 HSL 色值中的角度值 (0deg - 255deg)。
saturation(color) 获取一个颜色的饱和度值(0% - 100%)。
lightness(color) 获取一个颜色的亮度值(0% - 100%)。
alpha(color) 获取颜色透明度值(0-1)。
opacity(color) 获取颜色不透明度值(0-1)。
颜色操作
mix(color1, color2, weight) 把两种颜色混合起来。 weight 参数必须是 0% 到 100%。默认 weight 为 50%，表明新颜色各取 50% color1 和 color2 的色值相加。如果 weight 为 25%，那表明新颜色为 25% color1 和 75% color2 的色值相加。
adjust-hue(color, degrees) 通过改变一个颜色的色相值（-360deg - 360deg），创建一个新的颜色。
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)
这个函数能够调整给定色彩的一个或多个属性值，包括 RGB 和 HSL 色彩的各项色值参数，另外还有 alpha 通道的取值。这些属性值的调整依赖传入的关键值参数，通过这些参数再与给定颜色相应的色彩值做加减运算。
change-color(color, red, green, blue, hue, saturation, lightness, alpha)
跟上面 adjust-color 类似，只是在该函数中传入的参数将直接替换原来的值，而不做任何的运算。
scale-color(color, red, green, blue, saturation, lightness, alpha)
另一种实用的颜色调节函数。adjust-color 通过传入的参数简单的与本身的色值参数做加减，有时候可能会导致累加值溢出，当然，函数会把结果控制在有效的阈值内。而 scale-color 函数则避免了这种情况，可以不必担心溢出，让参数在阈值范围内进行有效的调节。
rgba(color, alpha) 根据红、绿、蓝和透明度值创建一个颜色。
lighten(color, amount) 通过改变颜色的亮度值（0% - 100%），让颜色变亮，创建一个新的颜色。
darken(color, amount) 通过改变颜色的亮度值（0% - 100%），让颜色变暗，创建一个新的颜色。
saturate(color, amount) 提高传入颜色的色彩饱和度。等同于 adjust-color( color, saturation: amount)
desaturate(color, amount) 调低一个颜色的饱和度后产生一个新的色值。同样，饱和度的取值区间在 0% ~ 100%。等同于 adjust-color(color, saturation: -amount)
opacify(color, amount) 降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)
fade-in(color, amount) 降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)
transparentize(color, amount) 提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)
fade-out(color, amount) 提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)
Sass(Scss)学习相关推荐
- 【Sass/SCSS】我花4小时整理了的Sass的函数
[Sass/SCSS]我花4小时整理了的Sass的函数 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 Sass 定义了各 ...
- 一、SASS(SCSS)
文章目录 一.为什么有出现css预处理器 二.css预处理器(Sass/Scss.Less......)是什么? 三.Sass和Scss的关系 四.配置Sass编译环境 五.Sass语法拓展 5.1 ...
- vue-cli 3.0集成sass/scss到vue项目
尝鲜使用vue-cli 3.0.0-beta.6,很容易就可以完成scss到vue项目中. vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass 手动安装sass- ...
- css预处理器sass/scss入门
sass/scss入门 一.css预处理器是什么? 二.为什么要用css预处理器? 三.sass.less.stylus的区别? 四.sass与scss 五.sass安装 六.sass常见用法 6.1 ...
- sass/lsee 转换css 网站 SASS 转 CSS 工具，在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
sass/lsee 转换css 网站 SASS 转 CSS 工具,在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
- HBuilder X 配置sass/scss
HBuilder X 配置sass/scss 在工具栏上,找到工具–>插件安装–>插件市场–>搜索sass,步骤如下图所示: 这两种方法选择一种安装插件即可,安装完记得重启hBuil ...
- Webpack: CSS 到 Sass/Scss 与 CSS Module
Webpack: CSS 到 Sass/Scss 与 CSS Module 文章目录 Webpack: CSS 到 Sass/Scss 与 CSS Module 前言 正文 1. 在 JS 中引入 C ...
- Less、Sass\Scss
Less.Sass\Scss less.scss/sass区别 都是动态样式语言,比css多出很多功能. scss/sass的功能有变量.嵌套.运算,混入(Mixin).继承.颜色处理,函数等,Sas ...
- 【前端笔记】SCSS学习篇之一：基础入门
2021年2月份有学习完一个SCSS系统教程,现在回顾复习一下当时学习的记录总结. 基础入门笔记总结 目录 1.sass和scss的区别 2.声明变量 3.嵌套 4.混合 5.继承 6.import ...
最新文章
- Tensor Core技术解析（上）
- Openfire3.9.3源代码导入eclipse中开发配置指南
- 突破Outlook2003附件格式限制
- Android 7.0 SystemUI 之启动和状态栏和导航栏简介
- c++计算-eigen(1)
- C++11系列学习之二-----lambda表达式
- codevs1521 华丽的吊灯
- html怎么帮图片占位,css+html实现Skeleton Screen 加载占位图动画效果（带动画）
- iPhone 14系列将采用打孔屏：Face ID等元件或置屏幕下
- 腾讯广告算法大赛 | 复赛第二周最佳进步奖得主心得分享
- 用ssms建sql server数据库和python连接到数据库
- 数据结构之一元多项式相加
- 生信：1：vcf格式文件解读
- QT在状态栏添加label
- 谷歌身份验证器在手机间转移教程
- 计算机组成原理实验箱D7,计算机组成原理与系统结构实验仪教学设备,上海求育...
- final cut pro 最快速，最简单的批量字幕制作方法！
- ArcGIS导入xyz序列并绘制地形图（含等高线、面体积、点距离的计算）
- 十一，常量（constant）详细讲解
- 【转】使用cocosbuilder在cocos2d-…