zoukankan      html  css  js  c++  java
  • css预处理器--sass学习($变量名)

    sass有两种形式1、scss  2、sass

    一:代码的基本用法

    1、变量

      如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

      $side : left;

      .rounded {
        border-#{$side}-radius: 5px;
      }

    2、计算

        sass允许在代码中进行计算

      body {
        margin: (14px/2);
        top: 50px + 100px;
        right: $var * 10%;
      }

    3、嵌套

      div h1 {
        color : red;
      }

      可以写成:

      div  {
        h1{

          color : red;

        }
      }

      属性也可以嵌套,如:

      p {
        border: {
          color: red;
        }(ps:border后面必须加上冒号)
      }

      在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

      a {
        &:hover { color: #ffb3ff; }
      }

    4、注释

      SASS共有两种注释风格。

      标准的CSS注释 /* comment */ ,会保留到编译后的文件。

      单行注释 // comment,只保留在SASS源文件中,编译后被省略。

      在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

      /*! 
        重要注释!(通常可以用于声明版权信息)
      */

    二:代码的重用

    1、继承

      class2要继承class1,就要使用@extend命令:

      .class1 {
        border: 1px solid #ddd;
      }

      .class2 {
        @extend .class1;
        font-size:120%;
      }

    2、Mixin

      Mixin有点像C语言的宏(macro),是可以重用的代码块。

      使用@mixin命令,定义一个代码块。

      @mixin left {
        float: left;
        margin-left: 10px;
      }

      使用@include命令,调用这个mixin。

      div {
        @include left;
      }

      mixin的强大之处,在于可以指定参数和缺省值。

      @mixin left($value: 10px) {
        float: left;
        margin-right: $value;
      }

      div {
        @include left(20px);
      }

    (有事暂停一下,本文出处:http://www.ruanyifeng.com/blog/2012/06/sass.html)

  • 相关阅读:
    【PL/SQL练习】显式游标
    【PL/SQL练习】控制结构
    【PL/SQL练习】游标cursor :oracle 在执行sql语句时,为sql语句所分配的一个私有的内存区域
    【PL/SQL练习】DML语句的处理(可以处理多行数据)
    【PL/SQL练习】复合变量: 可以一次传递多个值到变量中。
    【PL/SQL练习】基本的PL/SQL语句
    【小错误】监听
    【考试】用户管理
    【考试】简单的sql语句
    织梦自定义表单地区联动类型不可用的解决办法
  • 原文地址:https://www.cnblogs.com/ch-zaizai/p/8124419.html
Copyright © 2011-2022 走看看