由于没有办法在网络上找到适合顾客的模板,同时之前自己写css也没有很好的管理方式,最终选择了scss. Nested #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } >>>>>>>>>>>>>>>>>>>> #main p { color: #00…

vue安装scss: npm install sass-loader node-sass --save-dev 注意事项: <style lang="scss" scoped> @import '../../style/common'; //必须加分号,不然会报错 @import '../../style/ele'; </style> 在main.js文件中直接引入scss文件控制台会报错,解决方法: 因为vue-cli已经配置好scss的编译, webpack…

1.引用父选择符: & #main { color: black; a { font-weight: bold; &:hover { color: red; } } } 2.font:2px/3px 代表 字体大小2px 且 line-height:3px .funky { font: 2px/3px { family: fantasy; size: 30em; weight: bold; } }  3.Placeholder Selectors: %foo //如果没有找到%extrem…

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

css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该环境将css预处理的语言编译成正常的css文件; sass与scss 学习网站:  http://sass.bootcss.com/ sass是采用Ruby语言编写的一款css预处理语言.Sass的缩进语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sa…

一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 二.安装和使用 Sass依赖于ruby环境,所以装sass之前先确认装了ruby.先导官网下载个ruby.在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境.安装好ruby后,然后安装Sass.(mac自带) 输入一下命令: gem install sa…

sass的文件后缀名 sass是目前流行的css预处理语言.sass有两种后缀文件,一种是.sass,不允许使用大括号和分号:另一种是.SCSS,允许使用大括号和分号,类似于我们平时写css的语法习惯.其实sass最早出现在2007年,但却没有后来的LESS流行和易于接受,最主要的原因是sass严格的语法要求不太符合csser编写,sass为了改变这种现状,迎合大众,推出了更为宽松的SCSS这种类css写法. sass文件的编译 sass扩展了css的写法,为css提供了变量,继承,宏等能够提高…

_mixin scss包括常用的mixin,%及@functionmixin,通过@include调用,样式通过拷贝的方式使用,尤其适用于传递参数%,通过@extend调用,样式通过组合申明的方式使用,适用于不传参数的代码片段 @function,返回一个值,用于调用----------------------------------------------------- mixin & %既定义了mixin也定义了%,根据需求使用@include或@extend调用 // inline-blo…

看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰 SASS是CSS3的一个扩展,增加了规则嵌套.变量.混合.选择器继承等等.通过使用命令行的工具或WEB框架插件把它转换成标准的.格式良好的CSS代码. SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS. SASS与SCSS的区别如下: Sass 有两种语法规则(syntaxes),目前新的语法规则(从…

1. 安装Ruby 最新为 2.1.5版本,不放心的话安装 Ruby 1.9.3-p551    安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去.       安装结束后在命令行中运行 ruby -v 能看到对应的版本则说明安装正确.     2.通过Ruby安装Sass     启动Ruby中的“Start Command Prompt with Ruby”     在命令行中输入: gem sources --remove https://rubygems.org/ ge…