-
[Sass]嵌套输出方式 nested 1、嵌套输出方式 nested Sass 提供了一种嵌套显示 CSS 文件的方式。例如 nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 在编译的时候带上参数“ --style nested”: sass --watch test.scss:test.css --style nested 编译出来的 CSS 样式风格： nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }查看全部
-
众所周知，每个人编写的 CSS 样式风格都不一样，有的喜欢将所有样式代码都写在同一行，而有的喜欢将样式分行书写。在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格： 嵌套输出方式 nested 展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compressed查看全部
-
[Sass]常见的编译错误 在编译 Sass 代码时常常会碰到一些错误，让编译失败。这样的错误有系统造成的也有人为造成的，但大部分都是人为过失引起编译失败。 而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。 另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败，在编译过程中都会有具体的说明，大家可以根据编译器提供的错误信息进行对应的修改。查看全部
-
1、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']); } 2、Gulp 配置 Sass 编译的示例代码 var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); }); gulp.task('watch', function() { gulp.watch('scss/*.scss', ['sass']); }); gulp.task('default', ['sass','watch']);查看全部
-
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css watch 举例： 来看一个简单的示例，假设我本地有一个项目，我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件，并且将编译出来的文件放在“css”文件夹中，我就可以在我的命令终端中执行： sass --watch sass/bootstrap.scss:css/bootstrap.css查看全部
-
嵌套输出方式 nested 展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compressed查看全部
-
sass --watch 文件路径/style.scss:输出的路径/style.css查看全部
-
gem update sass gem install sass查看全部
-
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。查看全部
-
在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如： @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; } 但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如： .box { @include border-radius(50%); }查看全部
-
在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”: @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } 在一个按钮中要调用定义好的混合宏“border-radius”，可以这样使用： button { @include border-radius; }查看全部
-
1、声明混合宏 不带参数混合宏： 在 Sass 中，使用“@mixin”来声明一个混合宏。如： @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 带参数混合宏： 除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如： @mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; }查看全部
-
其实伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用。我们就拿经典的“clearfix”为例吧： .clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } } 编译出来的 CSS： clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }查看全部
-
Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。 在 Sass 中我们可以这样写： .box { border: { top: 1px solid red; bottom: 1px solid green; } }查看全部
-
选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种： 选择器嵌套 属性嵌套 伪类嵌套查看全部
举报
0/150
提交
取消