zoukankan      html  css  js  c++  java
  • SCSS 的理解

            ASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

    它其实跟LESS前面的基础内容也差不多,知识在LESS的前提下增加了。 Sass语法较为严谨、严密,同时逻辑性和运算功能更强大,他更贴近机器语言逻辑比较分明

    比如:隐藏注释,占位符选择器,数据类型,颜色操作,变量的默认值,扩展,控制指令(如@if@for@while)等。

    Sass的一个关键特性是缩进式的语法,这种语法可以产生柱式外观的代码,而且之前之前说说的LESS他是受到SCSS的启发才生成的一个工具,当然LESS也是有各自的优缺点

     作为框架型语言SCSS更具有逻辑性,同时也他的上手难度也相对增加了。如果想要玩的6的话,还是要更多的在逻辑性语言中下点功夫这样对于SCSS来说更好理解和接受,

     下面是我个人的代码:

    @mixin wh($h,$w){
           $w;
         height: $h;
    }
    @mixin zt($F-s,$F-w){
      font-weight:$F-w ;
      font-size:$F-s ;
    
    }
    @mixin  margin($top,$left,$rig,$bot){
            margin-top: $top;
            margin-left: $left;
            margin-right: $rig;
            margin-bottom: $bot;
    }
    $b:1px solid red;
    $md:0px auto;
    @mixin typeface_li($t-h,$-c:left,$f-w:normal,$f-z:12px,$t-d:none,$color:black,$l-s:none){
      line-height:$t-h;
      font-weight:$f-w ;
      text-align: $-c;
      font-size: $f-z;
      text-decoration:$t-d;
      color:$color ;
      list-style:$l-s;
    }
    *{
      margin: 0px ;
      padding: 0px;
     // font-family: "BrushScriptStd";
      font-family:ACaslonPro-BoldItalic;
    }
    body{
      @include wh(100%,100%);
       min-960px;
      background-image: url("images/main-bg.jpg");
      background-repeat:no-repeat ;
      background-color:#1a1a1a ;
    }
    header{
    
        @include wh(520px,950px);
        margin: 100px auto;
        background-image: url("images/slide-1.jpg");
    }

    这是一个网页的代码,太多所以也就并没有全部弄来,知识前面的声明和编译才是SCSS的核心就可以了。对于我来说我还是觉得CSS更得我心,,可以更好的驾驭它,也可以能是我才接触,对于新鲜事物的抵触吧,不过看以后,一切都会随着时间改变

  • 相关阅读:
    span 固定宽度且与其它元素同一行的样式设置
    height、clientHeight、scrollHeight、offsetHeight区别
    jquery选择器多值情况处理(取select列表选项的值)
    用Javascript取float型小数点后两位,例22.127456取成22.13,如何做?
    【JS获取与设置】FCKeditor编辑器的值
    浅析java位运算符计算方式
    分治策略(算法)
    Java GUI入门教程
    Java面向对象知识总结
    数据结构(Java)——图的基础算法
  • 原文地址:https://www.cnblogs.com/wangjunjunjiayuan/p/4658783.html
Copyright © 2011-2022 走看看