scss
Sass(Scss)是世界上最成熟、稳定和强大的专业级CSS扩展语言,Sass(Scss)中文网主要致力于Sass(Scss)在中国的推广,通过Sass(Scss)来改变前端工程师,提高效率
hide_in_darkness
萌新一枚
展开
-
Scss学习--Scss的下载、监听Scss工程、Sass工程的启动以及Scss文档
Scss文档:Scss英文文档:Scss英文文档Scss中文文档:Scss中文文档Scss下载:node下载 npm install node-sass -gnpm下载 npm install sass -g下载koala下载Ruby监听Scss:1、项目文件监听:sass --watch [input.scss] [output.scss]2、项目目录监听sass --watch [inflie] : [outfile](infile和outfile之间加个冒号)//编译格式原创 2020-07-23 19:09:17 · 428 阅读 · 0 评论 -
Scss学习--关于Scss指令@use、@forward
@use从其他Sass样式表加载mixin,function和变量,并将来自多个样式表的CSS组合在一起// src/_corners.scss$radius: 3px;@mixin rounded { border-radius: $radius;} // style.scss@use "src/corners" as corners;.button { @include corners.rounded; padding: 5px + corners.$radius;}原创 2020-07-23 18:51:35 · 10591 阅读 · 0 评论 -
Scss学习--关于Scss指令@mixin、@include、@content、@function
@include导入mixin定义的“类”样式@mixin用于定义可重复使用的样式,避免了使用无语意的 class@mixin large-text{ font: { family:Arial; size: 20px; weight: bold; } color: #f00; .divbox{ height: 500px; width: 60px; margin-top:原创 2020-07-23 18:11:35 · 27612 阅读 · 0 评论 -
Scss学习--关于Scss指令@if、@for...from...through...@each..in 、@while
@if条件判断语句@if (compare1){statement1}@else if (compare2){statement2}…@else{statementn}首先判断compare1中的语句如果不满足则判断compare2中的语句以此判断下去,直到第n条满足compare n语句时那么就执行 statement n中的语句$monster: duck;p.normal{ background-color: if(1==2,red,green); @if原创 2020-07-23 17:49:29 · 5697 阅读 · 0 评论 -
Scss学习--关于Scss指令@at-root、@warn、@debug、@error
@at-root将标签放到根路径下.parent{ width: 600px/960px*100%; height: 300px/960px*100%; @at-root .child{ width: 200px; height: 250px; } .brother{ background-color: palegreen; @at-root .his_son{ font-s原创 2020-07-23 17:40:16 · 776 阅读 · 0 评论 -
Scss学习--关于Scss指令@extend
@extend将一个选择器下的所有样式继承给另一个选择器.error{ box-decoration-break: 1px red; background-color: #fdd;}.intrusion.error { background-image: url("/image/hacked.png"); }.seriousError{ @extend .error; background-color: #fdd; border-width:原创 2020-07-23 17:19:32 · 1124 阅读 · 0 评论 -
Scss学习--Sass与Scss的区别
Sass采用空格缩进的方法分割作用域/*CSS拓展功能1:嵌套*/#main p color: redScss采用{}的方法分割作用域/*CSS拓展功能1:嵌套*/#main p{ color: red }scss和sass之间的转换:转换器:scss、sass转换器...原创 2020-07-23 16:51:12 · 147 阅读 · 0 评论 -
Scss学习--关于Scss指令@import、@meida
@import 导入文件指令@mixin list-reset-group{ margin: 0; padding: 0; list-style: none;}$family:unquote("Droid+Sans");@import url("http://fonts.googleapis.com/css?family=\#{$family}");@import "./particular/part01.scss";注意:通常,@import 寻找 Sass 文原创 2020-07-23 16:46:34 · 1476 阅读 · 0 评论 -
Scss学习--定义变量!default、!global、!optional
!default如果变量已经被赋值,不会再被重新赋值但是如果变量还没有被赋值,则会被赋予新的值。$content:"First blood";$content:"Double kill" !default;p{ content:"#{$content}";}>>>P{ content:'First blood';}$contents:"Double kill" !default;p{ content:"#{$contents}";}>&原创 2020-07-23 16:29:39 · 2156 阅读 · 0 评论 -
Scss学习--Scss插值语句、父类子类选择器嵌套
插值语句通过 “#{}” 插值语句可以在选择器或属性名中使用变量$name: foo;$attr: border;p.#{$name} { //此处会被代替为p.foo #{$attr}-color: blue;}父类选择器 &/*!父类选择器*/.foo.bar .baz.bang .bip.qux{ $selector:&; // $selector:.foo.bar .baz.bang .bip.qux content: "#{$selecto原创 2020-07-23 16:12:07 · 14232 阅读 · 1 评论 -
Scss学习--Scss逻辑运算
逻辑运算scss支持±*/等逻辑运算这里着重讲解+和/除法只有在以下三种情况中scss才会把 / 视为除法运算符号:如果值,或值的一部分,是变量或者函数的返回值如果值被圆括号包裹如果值是算数表达式的一部分*/p{ height: 10px/8px; width: (10px/2) ; padding:2px + 8px/2; $margin-social:10px; $margin-image:5px; margin-top: $margi原创 2020-07-23 16:02:35 · 2552 阅读 · 0 评论 -
Scss学习--Scss数据类型
SassScript 支持 6 种主要的数据类型:数字,1, 2, 13, 10px字符串,有引号字符串与无引号字符串,“foo”, ‘bar’, baz颜色,blue, #04a3f9, rgba(255,0,0,0.5)布尔型,true, false空值,null数组 (list),用空格或逗号作分隔符maps相当于 JavaScript 的 object,(key1: value1, key2: value2)SassScript 也支持其他 CSS 属原创 2020-07-23 15:49:51 · 302 阅读 · 0 评论 -
Scss学习--Scss的功能简介
SCSS拓展功能1:嵌套#divbox{ color: blue; p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } }}SCSS拓展功能2:父选择器 & 的嵌套a{ font-weight: bold; text-decoration: none;原创 2020-07-23 15:36:10 · 522 阅读 · 0 评论