- List item
/*scss 语法
例：
所以注释需要写在花括号中
*/
//scss
//例：
//每行都需要单独双斜杠来注释
//@import "base"; 末尾需要加分号
/*
@mixin alert {
color: #fff;
background: #000;
}
定义@mixin 需要使用@mixin指令 @mixin主题要放在花括号里面，每一行代码结束地方要带分号
*/
//引入@mixi时需要使用@include指令
//写样式的时候需要使用 花括号和分号
/*@mixin flow(flex,row) {
display: flex;
flex-direction: row;
}*/
* {
margin: 0;
padding: 0;
}
//边距
$m-sm: 5px !default;
$m-lg: 10px !default;
$m-xl: 15px !default;
$m-xxl: 20px !default;
//填充
$p-sm: 5px !default;
$p-lg: 10px !default;
$p-xl: 15px !default;
$p-xxl: 20px !default;
//颜色
$color-white: #fff !default;
$color-prominent: #FF8427 !default;
$color-gray: #f9fafc !default;
$color-gray-666: #666 !default;
$color-block: #000 !default;
$color-background-white: $color-white !default;
//圆角
$border-r-sm: 5px !default;
$border-r-base: 7px !default;
$border-r-circle: 50% !default;
//字体大小
$font-s-sm: 12px !default;
$font-s-base: 14px !default;
$font-s-lg: 16px !default;
$font-s-xl: 18px !default;
//字体粗细
$font-weight-bold: 600 !default;
$font-weight-bolder: 700 !default;
//盒模型
$overflow-hidden: hidden !default;
$overflow-scroll: scroll !default;
$display-inline: inline !default;
$display-inline-block: inline-block !default;
$display-block: block !default;
$display-flex: flex !default;
//文本对齐
$text-align-left: left !default;
$text-align-center: center !default;
$text-align-right: right !default;
@mixin display {
display: $display-flex;
display: -webkit-flex;
}
@mixin flex ($display-flex,$flex-direction,$justify-content,$align-items,$align-content) {
display: $display-flex;
flex-direction: $flex-direction;
justify-content: $justify-content;
align-items: $align-items;
align-content: $align-content;
}
$hd: 2 !default;//基础单位
@mixin weight-height ($weight,$height){
@if($weight ==100%) {
width: $weight !important;
} @else {
width: $weight*$hd !important;
}
@if($height==100%) {
height: $height !important;
} @else {
height: $height*$hd !important;
}
}
@mixin height-line-height ($height,$line-height) {
height: $height*$hd;
line-height: $line-height*$hd;
}
@mixin font ($font-size,$color,$font-weight:normal){
font: {
size: $font-size;
weight: $font-weight;
}
color: $color;
}
.page {
height: 100vh;
background: $color-gray;
overflow: $overflow-hidden;
}
@mixin alert($text-color,$background-color) {
font-size: 14px;
color: darken($text-color,10%);
a {
background: $background-color;
}
}
.item {
@include alert(#333, #666);
}
div {
font-size: 14px;
color: $color-white;
background: $color-background-white;
& span {
padding: $p-lg;
font:{
size: 12px;
weight: 400;
}
}
a {
display: block;
}
}
sass和scss的区别
sass通常指的是sass和scss以变量和代码来写的css代码
Sass(Syntactically Awesome Style Sheets)是第一种语法格式。SCSS(Sassy CSS)是后面出来的一种Sass语法，其更类似于CSS语法。你可能比较喜欢使用SCSS。
sass以缩进语法来写css代码
3.0介绍了一种新的语法叫sassy css(常用css写法)
scss是sass的加强版以一般css写法来写代码
- 扩展名不同
- 注释语法不同
- 引用指令格式不同
sass安装
1.sass的安装需要下载ruby使用包管理工具gem安装(mac自带ruby无需安装)
-下载安装ruby
-勾选Add Ruby executables to your PATH选项添加到系统环境变量
Cmd终端或Terminal中输入命令
安装完成输入ruby -v命令 安装成功会打印相关信息版本号 ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]
ruby -v
2.在本地安装Sass和Compass
直接安装Compass就可以将Sass一起安装了，因为Compass框架的运行需要依赖于Sass。
gem install compass
安装Sass
输入gem install sass命令安装Sass
gem install sass
安装完成之后，输入sass -v命令来确认应用已经正确地安装到了电脑中：
sass -v
scss文件中写样式编译生成css文件
支持2种编译模式：
命令行编译
软件编译
Sass编译排版有4种格式：
//未编译样式
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
默认使用嵌套格式，常用的是压缩格式
1. nested(嵌套) 编译排版格式（）
/*命令行内容*/
sass style.scss:style.css --style nested
/*编译过后样式*/
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
2. expanded(紧凑) 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style expanded
/*编译过后样式*/
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
3. compact(扩展) 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style compact
/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
4. compressed(压缩) 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style compressed
/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
cmd使用cd定位一个路径，使用mkdir命令创建目录，和名字，&& cd $_进入到这个目录里面
cd Desktop
mkdir web-sass && cd &_
使用自动监视变化
sass --watch sass:css
变量
定义变量
使用变量可以灵活的替换变量值，不用来查找替换样式
sass变量的声明和css属性的声明很像：
定义变量格式：$变量名:变量值;
变量名可以用中划线或下划线作字母连接
变量值类型：字母、字符串、颜色、定义的变量、和空格分隔的多个属性值和逗号分隔多个属性值
$color-gray:#999;
$border-base: solid 1px $color-gray;
使用变量
任何样式的赋值都可以使用sass定义的变量值
box {
color: $color-gray;
border: $border-base;
}
嵌套
使用嵌套可以避免写重复的选择器
scss语法嵌套,定义/变量值 都可嵌套
编译css的时候，会把父级的类名加在子级的前面
编译变量值的时候，把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中 scss解析的时候 会把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样
$color-gray:#999;
$border-base: solid 1px $color-gray;
.box {
color: $color-gray;
item {
background: $color-gray;
font: {
size: 12px;
weight: bold;
}
}
& txt {
border: $border-base;
}
}
导入scss
css不常用特性@import规则允许在css中导入其他css 但是只有文件执行到@import时浏览器才会去下载其他css文件，导致页面加载特别慢。
scss的 @import规则在生成css文件时就把相关文件导入进来，所有样式被归纳到同一个css文件中无需发起额外的下载请求，所有在被导入文件中(其他scss)定义的变量和混合器均可在导入文件中(当前scss)使用
scss的@import不需要指明被导入文件的全名 可以省略.scss.sacc后缀名
使用sass部分文件
想生成少数几个css文件,并不需要生成对应的独立css文件，这样的sass文件称为局部文件.
sass局部文件的文件名以下划线开头,编译时单独编译这个文件输出css，把这个文件用作导入 @import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线
你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写 @import “themes/night-sky”;
themes/_night-sky.scss
//省略后写法
@import "themes/night-sky";
对导入的样式稍作修改 使用默认变量值 sass的!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
嵌套导入
跟原生的css不同，sass允许@import命令写在css规则内 局部文件会被直接插入到css规则内导入它的地方
.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
aside {
background: blue;
color: #fff;
}
}
sass兼容原生的css 原生的CSS@import，会造成浏览器解析css时的额外下载 把原始的css文件改名为.scss后缀，即可直接导入
静默注释
静默注释的代码不会出现在生成的css文件中 语法跟JavaScriptJava等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
混合器@mixin里面的参数
少许一致的样式比如颜色和文本使用变量就可以处理了
如果不停地重复大段样式，那就把这段样式 构造成优良的混合器
通过sass的混合器实现大段样式的重用
混合器使用@mixin标识符定义 这个标识符给大段样式赋予一个名字，通过引用这个名字重用这段样式
定义规则
@mixin 参数名（参数1,参数2…）{
}
$font-s-lg: 16px !default;
$color-block: #000 !default;
$font-weight-bold: 600 !default;
@mixin font ($font-size,$font-weight:normal,$color){
font: {
size: $font-size;
weight: $font-weight;
}
color: $color;
}
样式表中通过 @include来使用这个混合器传参，放在你需要的地方，生成精确样式 @include调用会把混合器中的所有样式提取出来放在@include被调用的地方
可以把它当作一个css函数来传参 混合器参数 就是可以赋值给css属性的变量
.item {
@include font($font-s-lg, $font-weight-bold, $color-block);
}
//Sass最终生成的是css代码：
.item {
font-size: 16px;
font-weight: 600;
color: #666; }
}
sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不用在乎，只需要保证没有漏掉参数
@include font($font-s-lg:16px, $color-block: #666, $font-weight-bold: 600)
继承
通过选择器继承其他选择器的样式，跟变量和混合器不同，继承不是仅仅用css样式替换@extend处的代码，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。
继承遵从css层叠的规则 被继承的样式会保持原有定义位置和选择器权重不变。
@extend语法
.alert{
padding: 15px;
}
.alert a {
font-weight: bold;
}
.alert-info {
@extend .alert ;
background-color: #d9edf7;
}
.alert, .alert-info{
padding: 15px;
}
.alert a, .alert-info a {
font-weight: bold;
}
.alert-info {
background-color: #d9edf7;
}
不要在css规则中使用后代选择器（比如.box.bar）去继承css规则,同时被继承的css规则有通过后代选择器修饰的样式，会让生成的css中包含大量的选择器复制。
=====手动分隔线
cd Desktop
cd C:\Users\lenovo\Desktop\home.scss
cd.>home.scss
scss的交互功能
sass -i
Partials
可以让我们的项目模块化，并且更有条理性。
sass可以在一个文件里面把其他的文件包含进来，sass会把他们编译成一个css文件
每一个partials就是一个sacc文件 文件名字前面要以_下划线开头
这样sass就知道这样的文件是一个partials不会单独的把这个sacc文件编译成css文件
引用
引用的时候可以省略下划线，后面的分号要写
@import "base";
这样就可以在引用文件生成的css里看到被引用的样式
Comment
sass有3中注释：单行注释，多行注释，强制注释
单行注释 不会出现在生成的css文件中
多行注释 被完整输出到编译后的 CSS 文件中，不过在压缩输出的css里会去掉多行注释
强制注释 会一直出现在css里面
//单行注释不会出现在生成的css文件中
/*多行注释
*被完整输出到编译后的 CSS 文件中
*不过在压缩输出的css里会去掉多行注释
*/
压缩前
压缩后
/*!强制注释
*会一直出现在css里面
*/
压缩后依旧出现在css文件里
Data Type
数据的类型 sass自带的函数
sass对不同类型的数据有不同的对待，sass里面自带的一些函数可以去处理这些不同类型的数据
判断数据类型 type-of() 函数里面给他一个参数 数字类型的数据还可以包含单位
输入多个参数返回 列表数据
英文字符 十六进制 RGB HSL数据 返回颜色类型
数字函数
sass里面会保留结果里面的小数
小数数字四舍五入的话使用 round()
如果想一直进位使用ceil()
如果想要退一位使用floor
把数字变成%百分数的形式使用 percentage()
取最大值用max()
取最小值用min()
String
字符串的±都会进行拼接 /线的时候会保留 /线符号 因为css有些属性可以这样写 /线分隔属性值 比如：border-radius: 0 0 300px 300px/0 0 20px 20px;*的时候会出现错误提示两个字符串的相乘是没有意义的
字符串函数
字符串变成大写使用 to-upper-case()
字符串变成小写使用 to-lower-case()
字符串长度使用str-length()
字符串位置使用str-index()
字符串插入使用str-insert() 3个值 第1要插入字符串的字符串 往变量插入的 第2要插入的字符串 第3插入的位置
Color函数
16进制使用rgb()
表示 R红 G绿 B蓝
值范围0-255
红(red)+绿(green)=黄(yellow)——红+蓝(blue)=品红(magenta)——绿+蓝=青(cyan)
透明度使用rgba()
表示 R红 G绿 B蓝 A alpha(阿尔法)
值范围 0(完全透明)-1(完全不透明) 数字大越不透明 数字小越透明(可以用小数点)
background-color: rgba(255,255,0,0.8)
hsl(也有hsla)
表示 H色相 S饱和度 L明度
值范围 色相0-360度 饱和度0-100% 明度0-100%
background-color: hsl(30,50%,80%);
adjust-hue 调整色相
color: adjust-hue(red,30%);
调整颜色明度变亮使用lignten
color:lignten(#000,30%);
调整颜色明度变暗使用darken
color:darken(#fff,30%);
调整颜色饱和度使用saturate
color:saturate(#fff,30%);
调整颜色减少饱和度使用desaturate
color:desaturate(#fff,30%);
调整颜色alpha值不透明度
调整颜色透明使用transparentize
color: rgba(255,255,255,0.3)
color:transparentize(#fff,0.3);
调整颜色透明使用opacify
color: rgba(255,255,255,0.3)
color:opacify(#fff,.5);
值范围 0(完全透明)-1(完全不透明) 数字大越不透明 数字小越透明(可以用小数点)
List函数
列表类型的数据，表示css属性里的一串值，可以用逗号或空格分开值，列表可以包含其他的列表，
border: solid 1px #ededed;
font-family: Courier, "Lucida Console",monospace;
padding:10px 5px, 5px 10px;
/*这两个列表也可以用()括号分隔开*/
padding: (10px 5px) (10px 5px);
数组长度用length
第几个用nth
序号用index
添加用append
结合用join(分隔符，逗号，空格，自动)
length(10px 50px)
nth(10px 5px,1)
index(solid 1px #ededed,1px)
append(10px 5px,5px)
join(5px 10px,10px 5px)
join(5px 10px,10px 5px,comma)
Map函数
列表带名字的列表，使用项目的名字来找到对应的值
$colors:(light: #fff,dark: #000) //新建一个map类型数据
长度使用length
对应的map项目名里面的k值
对应map项目名里面的所有k
对应map项目名里面的所有k的值
判断map项目里面是否有指定的k
合并map
移除
length($colors)
map-get($colors,dark)
map-keys($colors)
map-values($colors)
map-has-key($colors,light)
map-merge($colors,(light-gray: #ededed))
map-remove($colors,light,dark);
布尔值
在scss 里面可以使用比较运算符 返回的结果就是布尔值(boolean) true或者是false
7830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
