Scss基础用法 一.注释用法: (1)//comment:该注释只是在.scss源文件中有,编译后的css文件中没有. (2)/! /:重要注释,任何style的css文件中都会有,一般放置css文件版权说明等信息. (3)/ /:该注释在compressed的style的css中没有,其他style的css文件都会含有. 二.变量: 1.一般以$开头,有作用域限制 $color: red; .div{ background-color: $color; } 2.若子选择器中定义的变量想成为全…

 特别说明:scss函数名中的中划线和下划线是等同的,font-size和font_size指向同一个函数. 1.变量 2.选择器嵌套 3.属性嵌套 规则如下: (1).把属性名从中划线-的地方断开. (2).在根属性后边添加一个冒号:紧跟一个块,把子属性部分写在这个{ }块中. 4.&父选择器标识符,它的作用就相当于一个父选择器的占位符. 5.引入 6.操作符 +.-.*./.% 7.函数 8.混合 @mixin 9.继承@extend…

…

工作的时候天天用,面试的时候却没了思路,这就是懒得下场.多总结,多整理,才是成长得王道啊.最近换工作,把以前该整理得工作梳理一遍. 一.定义变量与引用 $color: #f00; $a-color: #ff0; $b_color: #009; .btn { width: 30px; height: 20px; color: $color; border-radius: 5px; border: none; display: inline-block; } 二.嵌套css 伪类选择器嵌套需要注意…

保持sass条理性和可读性的最基本的三个方法:嵌套.导入和注释. 一般情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值. $link-color: blue; $link-color: red; a { color: $link-color; } 最终编译成为红色 --------------------------------- & 在编译时将被替换为父选择符,如果你有一个深层嵌套的规则,父选择符也会在 & 被替换之前被完整的解析. #main { color: bla…

SCSS的由来 SCSS就是加强版的CSS,要讲SCSS那就一定要从SASS讲起 SASS Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言.2007年发行,2016年版本稳定,设计和开发分开进行,让这个语言的功能相当完善. Sass是像CSS一样的层叠样式表语言,但是它并不是由前端社区发明的,而是由Ruby社区发明创造,为什么Ruby社区要为前端创造语…

今天跟大家共同分享交流一下关于sass的知识点: sass的产生: css不是一种编程语言,我们可以用它开发网页样式,但不能用它进行编程.它没有常量,变量,也没有条件语句,只是对属性一行行的描述,资料上对它描述几乎都是:它是设计师的工具,而不是程序员的工具.实际上,它在程序员的眼里并不是那么完美的,它的写法需要人工一点点去进行排版,这不仅增加了程序员在编写过程中的困难,也使得后期的维护工作变得繁杂.在这种情况下,css预处理器(css preprocessor)应运而生.css预处理器主要包括以…

1.安装 SASS是Ruby语言写的,但是两者的语法没有关系.不懂Ruby,照样使用.只是必须先安装Ruby,然后再安装SASS. 假定你已经安装好了Ruby,接着在命令行输入下面的命令: gem install sass 然后,就可以使用了 2.2 使用 SASS文件就是普通的文本文件,里面可以直接使用CSS语法.文件后缀名是.scss,意思为Sassy CSS. 下面的命令,可以在屏幕上显示.scss文件转化的css代码.(假设文件名为test.) sass test.scss 如果要将显示…

scss 用法的准备工作,下载 考拉 编译工具 且目录的名字一定不能出现中文,哪里都不能出现中文,否则就会报错 es6 用法 let 和 const  let  声明变量的方式 在 {} 代码块里面才有效:且在相同的代码块,不能声明两个相同的变量名,一旦出了这个{} 代码块 ,此变量无效 const 声明常量的方式 声明完毕后,我们不能轻易的更改声明的常量,(但不代表我们不能更改,只是更改,还不如不用他声明) 字符串介绍: 传统的字符串拼接的方式,麻烦且容易出错,所以我们的 es6 提供了一种新…

最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用.记录分享下 rgba() 能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码 $linkColor: #20a0ff; .box{ box-shadow: 0 2px 6px 0 rgba($linkColor, 0.3); background-color: $linkColor; } 生成的 CSS 代码 .box{ box-shadow:0 2px 6px 0 rgba(32,160,255,.3)…