Sass

转自： https://www.jianshu.com/p/92afe92db99f 报错： E:\kibana>npm install node-sass > node-sass@3.8.0 install E:\kibana\node_modules\node-sass > node scripts/install.js Cannot download "https://github.com/sass/node-sass/releases/download/v3.8.0/win3 2-x64-48_binding.node": tunneling socket could not be established, cause=socket hang up Hint: If github.com is not accessible in your location try setting a proxy via HTTP_PROXY, e.g. export HTTP_PROXY=http://example.com:1234 or configure npm proxy via npm config set proxy http://example.com:8080 > node-sass@3.8.0 postinstall E:\kibana\node_modules\node

number类型函数 random() 0-1 random(10) 0-10之间的整数 random(100) 0-100之间的整数 编译后 list数组相关函数 编译后 @debug 实时返回打印结果，并在控制台输出 如现在演示的函数操作，没有实际的css意义，可以直接在控制台输出 输出结果 字符串函数 输出结果 map类型常见函数 编译结果 自定义函数 @function 编译结果 来源： https://www.cnblogs.com/chenyingying0/p/12593276.html

简单继承： @extend 继承 编译后 关联属性继承： 编译后 链式继承： 编译后 伪类继承： 编译后 sass嵌套 编译后 相同的属性值前缀，也可以用嵌套 编译后 sass条件控制 @if @else if @else 编译后 条件判断语句也可以写在外面 编译后 循环 @for $i from n1 through n2 （包括n2） @for $i from n1 to n2（不包括n2） 编译后 编译后 使用for循环遍历数组list length(list) 获取数组长度 编译后 while循环 用的官方demo，编译居然报错了 使用each遍历map 编译后 来源： https://www.cnblogs.com/chenyingying0/p/12592279.html

这个是因为node-sass没安装好，所以要重新安装 windows下运行命令：npm install node-sass --registry=https://registry.npm.taobao.org 来源： https://www.cnblogs.com/syingBlog/p/12580163.html

3 月，跳不动了？>>> 来源： oschina 链接： https://my.oschina.net/u/4393724/blog/3209923

3 月，跳不动了？>>> Sass和Less Sass和Less都属于CSS预处理器，CSS预处理器定义了一种新的语言，其基本思想是用一种专门的编程语言，为CSS增加了一些编程的特性，如：变量、语句、继承等概念。将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。 官网地址 Less官网地址： http://lesscss.org/ Less VSCode插件：Easy LESS Sass官网地址： https://sass-lang.com/ Sass VSCode插件：Easy Sass 编写Less文件 （后缀名.less） 备注：新建hello.less文件，然后写入代码，然后保存后会自动编译生成一个同名的css文件。 编写Sass文件 （后缀名.scss，老版本的后缀名为.sass） 备注：新建hello.scss文件，然后写入代码，然后保存后会自动编译生成一个同名的css文件和一个压缩后的css文件。 常用语法大纲 1. 注释 Sass Less 2. 变量 Sass （$符号） Less（@符号） 来源： oschina 链接： https://my.oschina.net/mj20200214/blog/3197704

某厂面试归来，发现自己落伍了！>>> CSS架构 在一个大型项目中，由于页面过多，导致CSS代码难以维护和开发。所以CSS架构可以帮助我们解决文件管理与文件划分问题。 首先要对CSS进行模块化处理，一个模块负责一类操作行为。可以利用Sass或Less来实现。 文件夹 含义 base 一些初始的通用CSS，如重置默认样式，动画，工具，打印等 components 用于构建页面的所有组件，如按钮，表单，表格，弹窗等 layout 用于布局页面的不同部分，如页眉，页脚，弹性布局，网格布局等 pages 放置页面之间不同的样式，如首页特殊样式，列表页特殊样式等 themes 应用不同的主题样式时，如管理员，买家，卖家等 abstracts 放置一些如：变量，函数，响应式等辅助开发的部分 vendors 放置一些第三方独立的CSS文件，如bootstrap，iconfront等 文件结构思维导图 main.scss 作为总的入口文件，引用所有的模块文件 @import "abstracts/variables"; @import "abstracts/function"; @import "abstracts/media"; @import "base/reset"; @import "base/typography"; @import "base/animate"; @import