-
【sass】混合宏 vs 继承 vs 占位符 1、混合宏--当代码块中涉及到变量时使用混合宏来创建相同的代码块。 2、继承----代码块不需要传参，且有一个基类已存在文件中时使用继承。 3、占位符--占位符和继承基本上相同，只是不会再代码中生成占位符的选择器。查看全部
-
拓展 .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; }查看全部
-
混合宏的使用和调用： @mixin border-radius { -webkit-border-radius: 5px; border-radius: 5px; } .box { @include border-radius(3px); }查看全部
-
sass 的默认变量仅需要在值后面加上 !default 即可。 $baseLineHeight:1.5 !default; body{ line-height: $baseLineHeight; }查看全部
-
Sass 调试一直以来都是一件头痛的事情，使用 Sass 的同学都希望能在浏览器中直接调试 Sass 文件，能找到对应的行数。值得庆幸的是，现在实现并不是一件难事，只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap” 参数： sass --watch --scss --sourcemap style.scss:style.css 在 Sass3.3 版本之上（我测试使用的版本是 3.4.7），不需要添加这个参数也可以： sass --watch style.scss:style.css 在命令终端，你将看到一个信息： >>> Change detected to: style.scss write style.css write style.css.map 这时你就可以像前面展示的 gif 图一样，调试你的 Sass 代码。查看全部
-
Grunt 配置 Sass 编译的示例代码 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { dist: { files: { 'style/style.css' : 'sass/style.scss' } } }, watch: { css: { files: '**/*.scss', tasks: ['sass'] } } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default',['watch']); }查看全部
-
GUI 界面工具来对 Sass 进行编译。当然不同的 GUI 工具操作方法略有不同。如果在此也一一对编译的界面工具做详细的介绍。我们可能需要写一本书来介绍这些编译工具的操作了。所以我们这里做一下简单介绍，对于 GUI 界面编译工具，目前较为流行的主要有： Koala (http://koala-app.com/) Compass.app（http://compass.kkbox.com/） Scout（http://mhs.github.io/scout-app/） CodeKit（https://incident57.com/codekit/index.html） Prepros（https://prepros.io/） 相比之下，我比较推荐使用以下两个： Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)查看全部
-
watch 自动监听命令 来看一个简单的示例，假设我本地有一个项目，我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件，并且将编译出来的文件放在“css”文件夹中，我就可以在我的命令终端中执行： sass --watch sass/bootstrap.scss:css/bootstrap.css查看全部
-
多种编译方法：1. 命令编译 2. GUI工具编译 3. 自动化编译查看全部
-
首页来说SASS和SCSS的区别 sass是一种对css的一种提升，可以通过编译生成浏览器能识别的css文件。sass技术的文件的后缀名有两种形式：.sass和.scss。这两种的区别在于.sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。查看全部
-
嵌套输出方式 nested 展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compressed查看全部
-
常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。另外一个错误就是路径中的中文字符引起的。查看全部
-
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css 例如 E:\project\koalaSass\Style.scss 想把Style.scss编译出来的.css文件放在E:\project\css\下 应该写成如下：sass --watch E:\project\koalaSass\Style.scss :E:\project\koalaSass\css\Style.css查看全部
-
减号必须两边有空格否则无法检测到减号查看全部
-
@mixin generate-sizes($class, $small, $medium, $big) { .#{$class}-small { font-size: $small; } .#{$class}-medium { font-size: $medium; } .#{$class}-big { font-size: $big; } } @include generate-sizes("header-text", 12px, 20px, 40px); 在@mixin调用#{}只能通过参数传字符串，否则就要用@extend调用$定义变量字符串 %updated-status { margin-top: 20px; background: #F00; } .selected-status { font-weight: bold; } $flag: "status"; .navigation { @extend %updated-#{$flag}; @extend .selected-#{$flag}; }查看全部
举报
0/150
提交
取消