-
常见的编译错误 在编译 Sass 代码时常常会碰到一些错误，让编译失败。这样的错误有系统造成的也有人为造成的，但大部分都是人为过失引起编译失败。 而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。 另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败，在编译过程中都会有具体的说明，大家可以根据编译器提供的错误信息进行对应的修改。查看全部
-
自动化编译 Grunt 和 Gulp 配置Grunt 和 Gulp下的 Sass 的编译。这里仅列出两个示例代码（具体情况要根据您的项目环境来做一定的修改，不建议生搬硬套） 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 sass/bootstrap.scss:css/bootstrap.css //单文件编译 (实时编译，通过 --watch) sass --watch sass/bootstrap.scss:css/bootstrap.css //多文件编译 sass sass/:css/查看全部
-
.btn{border:1px solid #ccc} .bbn{ color:#ccc @extend .btn }查看全部
-
@mixin center($width,$height){ width:$width; height:$height; position:absolute; top:50%; left:50%; margin-top:-($height)/2; margin-left:-($widht)/2 } .box-center{ @include center(500px,300px) }查看全部
-
@mixin border-radius($radius){ border-radius：$radius; } .box{ @include border-radius(3px) }查看全部
-
@mixin border-radius($border-radius:3px){ -webkit-border-radius:$border-radius; } button{ @include border-radius }3 调用混合宏查看全部
-
@mixin border-radius{ border-radius:5px; } @mixin border-radius($radius:5px){ border-radius:$radius } $radius:5px 操作符 变量 变量值查看全部
-
.box{ font:{ size:12px; weight:bold; } }查看全部
-
$baseLineHeight:2; $baseLineHeight:1.5 !default; body{ line-height:$baseLineHeight; }查看全部
-
sass: 不带有{}和； body color:#ccc background:#fff scss写法： $font-stack:Helvetica; $primary-color:#ccc; body{ font:100% $font-stack; color:$primary-color; }查看全部
-
$color:red; .test{ color:$color }查看全部
-
@mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }查看全部
-
想选中 header 中的 a 标签，在写 CSS 会这样写： nav a { color:red; } header nav a { color:green; } 那么在 Sass 中，就可以使用选择器的嵌套来实现： nav { a { color: red; header & { color:green; } } }查看全部
-
选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种： 选择器嵌套 属性嵌套 伪类嵌套查看全部
举报
0/150
提交
取消