SASS
关注
分享
扫一扫
你好！！！
贵哥的编程之路(热爱分享)
我是陈业贵。择一业，终二十年。子幼，看父敬子 子行 看子敬父。以后靠我了[呲牙][呲牙]。父母老了
展开
-
sass中循环结构
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*ul { li { width: 100%; height: 50px; border: 1px solid red; font-size: 20px; backgro原创 2020-08-19 02:05:55 · 568 阅读 · 1 评论 -
sass的条件判断篇
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*@mixin triangle($dir,$width,$color) { width: 0; height: 0; border-width: $width; border-style: sol原创 2020-08-19 01:38:48 · 3365 阅读 · 1 评论 -
SASS第十一篇 继承
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*继承是通过并集选择器, 不会拷贝只会保留一份*/ /* .center { position: 50%; left: 50%; top: 50%;原创 2020-08-08 00:55:08 · 534 阅读 · 0 评论 -
SASS第十篇 层级结构
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 1.SASS中的层级结构 和LESS一样支持嵌套, 默认情况下嵌套的结构会转换成后代选择器 和LESS一样也支持通过&符号不转换成后代选择器 */ /* @function s原创 2020-08-08 00:45:34 · 858 阅读 · 0 评论 -
SASS第九篇 @import
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*@import "06";/*加后缀与不加一样,这个相当于@mixin center(){ position: absolute; left: 50%; top: 50%; transform: transl原创 2020-08-06 23:19:14 · 578 阅读 · 0 评论 -
SAS第八篇 可变参数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*@mixin animate($name,$time,$args...) { transition: $name $time $args; } div { width: 200px; hei原创 2020-08-06 23:06:53 · 614 阅读 · 0 评论 -
SASS第七篇 SASS中带参数混合
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*scss代码,如下*/ /*@mixin whc($w:100px,$h:100px,$c:#000) { width: $w; height: $h; background: $c; }原创 2020-08-06 23:00:46 · 775 阅读 · 0 评论 -
SASS第六篇 混合
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> </title> <style> /* SASS中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){}; SASS中混合调用: @include 混合名称; 或者 @include 混合名称();*/ /*@mixin center原创 2020-08-06 00:46:13 · 528 阅读 · 0 评论 -
SASS第五篇 运算
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*div { width:200px; height:200px; background:red; position: absolute; left: 50%; margin: (原创 2020-08-06 00:40:06 · 520 阅读 · 0 评论 -
SASA第四篇 变量插值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /*为什么使用变量插值? 因为变量只是在属性值的形式上可以使用,但是在属性名与选择器名称不能使用变量，这时候变量插值的作用就凸显出来了.*/ /*sass格式*/ /*$size:200px; $w:width;原创 2020-08-06 00:35:52 · 598 阅读 · 0 评论 -
SASS第三篇 变量
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 1.SASS中的变量 SASS中的变量和LESS中一样, 只是定义格式不同 LESS中定义变量 @变量名称: 值; SASS中定义办理 $变量名称: 值; */原创 2020-08-03 00:11:46 · 541 阅读 · 0 评论 -
SASS第二篇 注释
/* 1.SASS中的注释 SASS中的注释和LESS一样 单行注释不会被编译(不会出现在编译后的文件中) 多行注释会被编译 (会出现在编译后的文件中) */ <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>原创 2020-08-03 00:10:14 · 512 阅读 · 0 评论 -
SASS第一篇 认识它
less以.less结尾.sass以.sass或者.scss结尾.两种不同结尾方式区别: .sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号 .scss以{}表示层级结构, 语句后面需要写分号 企业开发中推荐使用.scss结尾 注意点: 如果需要使用考拉编译sass文件, 项目目录结构中(包含文件名)不能出现中文和特殊字符 <!DOCTYPE html>原创 2020-08-03 00:09:06 · 502 阅读 · 0 评论