美文网首页
Sass/Scss——1

Sass/Scss——1

作者: 芹菜斯_嘉丽 | 来源:发表于2016-12-01 20:24 被阅读0次

    Scss 是Sass的新语法,从外形上看它和CSS长的几乎一模一样。文件名以.scss为扩展名。

    一.Sass编译

    1.命令编译

    (1)单文件编译:

    sass <路径>/style.scss:<输出路径>/style.css
    

    (2)多文件编译:

    sass sass/:css/
    

    sass文件夹中所有“sass(scss)”文件编译成“.css”文件,并将这些css文件放到项目的css 的文件夹中。

    缺点和解决办法

    只能一次编译,每次编辑一次.scss文件后,都得重新编译。

    解决办法:开启“watch”功能,这样只要你对代码进行修改并保存,都能自动检测代码的变化,并直接编译出来
    sass --watch <path1>/style.scss:<path2>/style.css
    

    2.[sass]GUI界面工具编译

    [Koala ]
    (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
    [CodeKit ]
    (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

    3.sass自动化编译

    使用Grunt 或Gulp
    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不同样式风格的输出方式(4种)

    sass 代码:

    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      li { display: inline-block; }
      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
    

    1.嵌套输出方式 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; }
    

    2.展开输出方式 expanded

    编译命令:

    sass --watch test.scss:test.css --style expanded
    

    css输出结果

    nav ul { 
      margin: 0; 
      padding: 0; 
      list-style: none;
      }//与nested相比后面的大括号另起一行
    nav li { 
      display: inline-block;  
      }//与nested相比后面的大括号另起一行
    nav a {
       display: block; 
      padding: 6px 12px; 
      text-decoration: none;
      }//与nested相比后面的大括号另起一行
    

    3.紧凑输出方式 compact

    编译命令:

    sass --watch test.scss:test.css --style compact
    

    结果:


    Paste_Image.png

    4.压缩输出方式 compressed

    编译命令:

    sass --watch test.scss:test.css --style compressed
    

    压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格:


    Paste_Image.png

    三. Sass的调试

    在浏览器中直接调试 Sass 文件,找到对应的行数。

    四.声明变量

    Paste_Image.png

    五.普通变量与默认变量

    1.如果重复声明不带 !default 的同一个变量,会取最近声明的那个。

    $lineHeight: 1;
    .line1{ 
    line-height: $lineHeight;
    }
    $lineHeight: 2;
    $lineHeight:1.5 !default;
    .line2{
     line-height: $lineHeight;
    }
    

    编译出来是

    .line1 { line-height: 1; }
    .line2 { line-height: 2; }
    

    六变量调用

    例子:

    $width:200px !default;
    body{
        width:$width;
    }
    

    七.局部变量和全局变量

    Sass 中变量的作用域在过去几年已经发生了一些改变。直到最近,规则集和其他范围内声明变量的作用域才默认为本地。如果已经存在同名的全局变量,从 3.4 版本开始,Sass 已经可以正确处理作用域的概念,并通过创建一个新的局部变量来代替。
    全局变量与局部变量
    先来看一下代码例子:

    //SCSS
    $color: orange !default;
    //定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
    .block { color: $color;//调用全局变量}
    em { 
        $color: red;//定义局部变量
       a { color: $color;//调用局部变量 }
     }
    span { color: $color;//调用全局变量}
    

    css 的结果:

    //
    CSS.block { color: orange;}em a { color: red;}span { color: orange;}
    

    上面的示例演示可以得知,在元素内部定义的变量不会影响其他元素。如此可以简单的理解成,
    全局变量就是定义在元素外面的变量,
    如下代码:

    $color:orange !default;
    

    $color 就是一个全局变量,而定义在元素内部的变量,比如
    $color:red;是一个局部变量
    除此之外,Sass 现在还提供一个 !global 参数。
    !global 和 !default 对于定义变量都是很有帮助的。
    我们之后将会详细介绍这两个参数的使用以及其功能。
    全局变量的影子
    当在局部范围(选择器内、函数内、混合宏内...)声明一个已经存在于全局范围内的变量时,局部变量就成为了全局变量的影子
    基本上,局部变量只会在局部范围内覆盖全局变量
    上面例子中的 em 选择器内的变量 $color 就是一个全局变量的影子。

    //SCSS
    $color: orange !default;//定义全局变量
    .block { color: $color;//调用全局变量}
    em { $color: red;//定义局部变量(全局变量 $color 的影子)
     a { color: $color;//调用局部变量 }}
    

    什么时候声明变量?
    我的建议,创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量,这丝毫没有作用。只有满足所有下述标准时方可创建新变量:
    **该值至少重复出现了两次;
    **该值至少可能会被更新一次;
    **该值所有的表现都与变量有关(非巧合)。

    基本上,没有理由声明一个永远不需要更新或者只在单一地方使用变量。
    温馨小提示:您在学习 sass 时,除了在我们网页上可以做练习,还有一个便利在线编辑器网址如下:
    http://sassmeister.com/

    相关文章

      网友评论

          本文标题:Sass/Scss——1

          本文链接:https://www.haomeiwen.com/subject/mfqfmttx.html