东莞正规制作网站公司吗,网站建设 总体思路,影楼网站模版,蓬莱建设管理局网站SASS是CSS预处理器#xff0c;简单来说#xff0c;SASS是比CSS更高一级的语言#xff0c;它拥有CSS不具备的语法#xff0c;比如if条件控制
SASS的预处理器
SASS是一种无法被浏览器直接执行的语言#xff0c;我们需要通过预处理工具#xff08;可以理解为翻译工具…SASS是CSS预处理器简单来说SASS是比CSS更高一级的语言它拥有CSS不具备的语法比如if条件控制
SASS的预处理器
SASS是一种无法被浏览器直接执行的语言我们需要通过预处理工具可以理解为翻译工具把SASS文件转化为CSS文件预处理工具有很多最推荐的方法的就是VScode的插件Easy SASS的方法也可用webpack的插件sass-loader。
SASS基本语法 嵌套规则(Nested Rules) SASS用缩进来简写嵌套结构
#main p {color: #00ff00;width:97%;/*嵌套后生成#main p .redbox*/.redbox {background-color:red;color:#000;}
}父选择器引用Referencing Parent Selectors: 代表父选择器简写
a {font-size:12px;:hover {color: red;} //生成a:hover.firebox {color:black} //生成.firebox a
}/* 多层嵌套 */
h1 {color:blue;p {color:red; a { //生成h1 p acolor:yellow }}
}/*规则:必须为前缀可以加后缀 */
.main {-head { //生成.main-head}
}父选择器 被作为一个后缀的时候Sass 将抛出一个错误。 属性的嵌套 Nested Properties 这部分用的很少但是也算个功能
.funky {font:{size:12px; //生成font-sizefamily:fatasy; //生成font-family}
}变量 //变量的声明 $width:5em; $width:5em !global //全局声明普通声明只在当前{}下有用
//变量的使用 width: w i d t h ; 变量名下划线和横杠互用 m a i n − h e a d 和 m a i n h e a d 默认相等变量名必须是 width; 变量名下划线和横杠互用main-head和main_head默认相等 变量名必须是 width;变量名下划线和横杠互用main−head和mainhead默认相等变量名必须是开头 变量的数据类型 字符串 数字数值保留单位 颜色 布尔值 空值 值列表数组 maps键值对 变量默认符 !default !default赋值的变量如果已被赋值则使用原值否则使用新值
$name 1em; $name 2em !default; //已被赋值1em,使用原值1em 插值语法#{} 插值语法常常是用来避免sass运算的保证其内容为纯css内容
KaTeX parse error: Expected EOF, got # at position 14: name:foo p.#̲{name} { //p.foo } 运算符 加减乘除±*/ 分割符/属性替代表示: #{KaTeX parse error: Expected EOF, got } at position 8: number1}̲/#{number2} -用作减法规则number1 - number2前后带空格number1-number2加括号或者-number-前加空格后加数字 可拼接字符串 布尔运算支持and,or,not 支持颜色运算支持括号不支持数组运算 函数 sassscript定义了部分可直接使用的函数 函数列表
//使用函数
p {color:hsl(100%,10%,0)
}关键字参数 关键字参数是对函数参数的命名除了方便阅读没有任何作用
p {color:hsl($light:100%,$darkness:10%,$hue:0)
}css3 规则 import 引入外部样式表 import “foo.sass”;
//如果不带后缀会搜索.sass和.scss后缀文件
import “foo”,“tools”; //import多个 media 媒体查询样式
.sidebar {width:100px;media ....... { //media会冒泡到顶端width:200px;}
}extend 继承类
.nav {display:block;font-size:12px
}.nav-small{extend .nav //继承.nav所有样式color:black;
}//继承css默认样式 extend a:hover;
//!optional标记找不到不会报错 at-root 将嵌套的层提到父层
debugwarn#error 将结果输出到控制台
控制指令和表达式 条件语句 if( ) //语法 if(布尔值,值1值2)
if(true,1px,2px) //1px if
p {if 11 2 {color:red;}if 11 3 {color:blue;}
}if,else if,else
p {if {}else if{}to}
}for的两种形式 for $var from through for v a r f r o m t o 循环中的参数 var from to 循环中的参数 varfromto循环中的参数name,不运算#{$name}
for KaTeX parse error: Expected }, got # at position 32: … 3 { .item-#̲{i} {width:2em*$i;} } each循环 each $var in
each v a r 1 , var1, var1,var2…in 多维list or map
while
$i:0;while $i5 {.item-#{$i} {width:2em*$i;}$i : $i1;}混入样式mixin SASS可以指定一个自定义的样式
//定义一个混入样式
mixin mixinname{display:block;color:white;
}//引入混入样式 body { include mixinname }
//带参数的引入样式
mixin mixinname ($para1,$para2){display:block;color:white;
}body {include mixname(2px,$value2) //可引入直接值和变量
}//关键字参数就是给参数起变量名用于方便阅读 body { include mixname( c o l o r : b l u e , color:blue, color:blue,size:3) // }
//可变参数…参数数目可变 mixin mixinname($para…){ //参数后面加… } content 内容混入 SASS可以自定义内容并引入
//定义一个自定义内容name
mixin name{content
}p {include name { //引入自定义内容name..... //content}
}函数指令 SASS可以声明函数
function func_name ($para){return $para*2
}//使用
p {width: func_name(5);}
