zoukankan      html  css  js  c++  java
  • .scss写法及如何转化为.css

    scss可视化工具:http://koala-app.com/index-zh.html

    scss讲解地址:http://www.cnblogs.com/adine/archive/2012/12/18/2823669.html

    官网:http://sass-lang.com/

     less,scss区别:

    http://www.kuqin.com/language/20120325/319416.html

    安装环节

     

    1.  安装rubyinstaller-2.0.0-p481-x64.exe一直next

    2.  安装完成后开始菜单中找到ruby里的这哥,打开命令提示框

    3.  使用gem install sass安装sass, gem install compass安装compass(sass大哥插件,练熟sass后再研究)

     

     

     

    编译环节

    SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。

    下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。)

    sass test.scss

    如果要将显示结果保存成文件,后面再跟一个.css文件名。

    sass test.scss test.css

    SASS提供四个编译风格的选项:

    * nested:嵌套缩进的css代码,它是默认值。

    * expanded:没有缩进的、扩展的css代码。

    * compact:简洁格式的css代码。

    * compressed:压缩后的css代码。

    生产环境当中,一般使用最后一个选项。

    sass --style compressed test.sass test.css

    你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

    // watch a file

    sass --watch input.scss:output.css

    // watch a directory

    sass --watch app/sass:public/stylesheets

     

     

    $color_333:#333333;
    $line_height24:24px;

    .text{                                                
    line-height:$line_height24;
    margin:$line_height24/2;
    color:$color_333;
    }

    .bg{
    background:$color_333;
    }

    /*编译结果*/

    @charset "GBK";
    .text {
    line-height: 24px;
    margin: 12px;
    color: #333333; }

    .bg {
    background: #333333; }


    .container{
    color:#ccc;
    h1{ font-size:18px;}
    ul{
    position:relative;
    margin-top:15px;
    li{
    background:#ddd;
    }
    }
    }

    /*编译结果*/

    .container {
    color: #ccc; }
    .container h1 {
    font-size: 18px; }
    .container ul {
    position: relative;
    margin-top: 15px; }
    .container ul li {
    background: #ddd; }

    @mixin float{
    .clear{
    clear:both;
    }
    .left{
    clear:left;
    }
    .right{
    clear:right;
    }
    }

    div{
    @include float
    }

    @mixin rounded-corners ($radius: 5px) {
      border-radius: $radius;
      -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
    }
    
    #header {
      @include rounded-corners;
    }
    #footer {
      @include rounded-corners(11px);
    }

    /*编译结果*/

    div .clear {
    clear: both; }
    div .left {
    clear: left; }
    div .right {
    clear: right; }

    #header{
      border-radius:5px;
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
    }
    #footer{
      border-radius:11px;
      -webkit-border-radius:11px;
      -moz-border-radius:11px;
    }


    /*继承*/
    .relative{
    display:block;
    position:relative;
    }
    .title{
    @extend .relative;
    font-size:18px;
    color:#fff;
    }

    /*编译结果*/

    .relative, .title {
    display: block;
    position: relative; }

    .title {
    font-size: 18px;
    color: #fff; }


    /*混合运算*/

    $selector_name:'clear';
    @mixin clearfix{
    #{$selector_name}{
    color:red;
    }
    }

    body{
    @include clearfix;
    }

    /*编译结果*/

    body clear {
    color: red; }


    /* 加减乘运算 */
    $the-border:1px;
    $base-color:#111;
    $red:#842210;

    #header{
    color:$base-color*3;
    border-left:$the-border;
    border-right:$the-border*2;
    }
    #footer{
    color:$base-color+#003300;
    border-color:desaturate($red,10%);
    }

    /*编译结果*/

    #header {
    color: #333333;
    border-left: 1px;
    border-right: 2px; }

    #footer {
    color: #114411;
    border-color: #7d2717; }


    /* 作用域 */
    $color_11: #00c; /* 蓝色 */
    #header_11 {
    $color_11: #c00; /* red */
    border: 1px solid $color_11; /* 红色边框 */
    }
    #footer_11 {
    border: 1px solid $color_11; /* 蓝色边框 */
    }

    /*编译结果*/

    /* 蓝色 */

    #header_11 {
    /* red */
    border: 1px solid #cc0000;
    /* 红色边框 */ }

    #footer_11 {
    border: 1px solid #cc0000;
    /* 蓝色边框 */ }

    @for $i from 1 to 10 {
    .border-#{$i} {
    border: #{$i}px solid blue;
    }
    }

    /*编译后的结果*/

    .border-1 {
    border: 1px solid blue;
    }

    .border-2 {
    border: 2px solid blue;
    }

    .border-3 {
    border: 3px solid blue;
    }

    .border-4 {
    border: 4px solid blue;
    }

    .border-5 {
    border: 5px solid blue;
    }

    .border-6 {
    border: 6px solid blue;
    }

    .border-7 {
    border: 7px solid blue;
    }

    .border-8 {
    border: 8px solid blue;
    }

    .border-9 {
    border: 9px solid blue;
    }

  • 相关阅读:
    【Nginx】url 带有 “https://” 双斜杠特殊处理
    【layui】tepmlet 格式化 table 数据
    于二零二零年:终章
    【Golang】练习-Web 处理 form 表单请求失败不刷新页面并保存输入的数据
    实现纸牌游戏的随机抽牌洗牌过程(item系列几个内置方法的实例)
    面向对象的进阶(item系列,__new__,__hash__,__eq__)
    面向对象阶段复习
    计算器实例
    反射
    静态方法staticmethod和类方法classmethod
  • 原文地址:https://www.cnblogs.com/xiaotaiyang/p/3835117.html
Copyright © 2011-2022 走看看