zoukankan      html  css  js  c++  java
  • sass

    1.安装 http://www.w3cplus.com/sassguide/install.html

    2.
     gem sources --remove https://rubygems.org/
     gem sources -a http://gems.ruby-china.org/ 

     或

    gem update遇到这个问题,原来是ruby没有包含SSL证书,Https的链接被服务器拒绝。

    解决方法:下载证书(http://curl.haxx.se/ca/cacert.pem), 然后环境变量里设置SSL_CERT_FILE环境变量,并把value指向这个文件

    3. 

    uby环境sass编译中文出现Syntax error: Invalid GBK character

    http://www.tuicool.com/articles/f2YVRv

    4.

    sass --watch sass:css

    nested
    compact
    compressed
    expanded
    sass --watch sass:css --style nested

    .sass
    3.0+ Sassy css
    .scss

    &:hover
    &引用父选择器

    嵌套:选择器嵌套,属性嵌套
    例一
    ul{
    border: 1px solid #000;
    font:{
    family:Arial;
    size: 19px;
    weight:600;
    }
    }

    例二
    li{
    border: 1px solid #ccc {
    left: 0;
    right: 0;
    }
    }

    mixin
    案例:
    @mixin alert($text-color,$background){
    color: $text-color;
    background-color:$background;
    a{
    color: darken($text-color,10%);
    }
    }

    .alert-warning{
    @include alert(#f60,#ccc);
    }

    .alert-info{
    @include alert($background:#333,$text-color:#fff);
    }

    @extend

    4.数据类型

    abs()
    round()
    ceil()
    floor()
    percentage(600px/1200px)
    min(1,2,3)
    max(1,2,3)

    to-upper-case()
    to-lower-case()
    str-length()
    str-index(,)第一个参数是要检查的字符串,第二个参数就是要判断位置的那个字符串
    str-insert(,,)第一个参数是要插入字符串的字符串,第二个参数是要插入的字符串,最后还要指定一下插入的位置(字符位置,如5个字符后面,为6)

    Hex,RGB,String

    rgb()
    rgb()
    hsl()
    hsla()

    adjust-hue(,)第一个参数是要调整的颜色,第二个参数是要调整的度数deg

    lighten()
    darken()
    saturate()
    desaturate()
    transparentize()
    opacify()

    list,如
    bodrder:1px solid #ccc,
    font:italic bold 12px/20px arial,sans-serif
    padding:5px 10px,5xp 0
    padding:(5px 10px) (5xp 0)

    >>length(5px 10px);
    2
    >>nth(5px 10px,1)
    5px
    >>index(1px solid red,solid)
    2
    >>append(5px 10px,5px)
    (5px 10px 5px)
    >>join(5px 10px, 5px 0)
    (5px 10px 5px 0)
    >>join(5px 10px, 5px 0, comma)
    (5px, 10px, 5px, 0)

    map
    map-get(,)
    map-keys()
    map-values()
    map-has-key(,)
    map-merge(,)
    map-remove(,)

    boolean
    interpolation,#{} 例如:/*当前版本:#{$version}*/

    5.控制指令

    @if 条件{

    }@else if 条件 {

    }@else{

    }

    @for $var from <开始值> through <结束值>{

    }

    @for $var from <开始值> to <结束值>{

    }

    @each $var in $list {

    }

    @while 条件{

    }

    6.函数

    @function 名称(参数1,参数2){

    }

    @warn
    @error

  • 相关阅读:
    HTML5触摸屏touch事件使用介绍1
    hdu 1408 acdearm &quot;Money, Money, Money&quot;
    基于QTP的自己主动化測试框架介绍
    ExpandListView onChildClickListener 失效
    hdu1227 Fast Food
    Linux C高级编程——文件操作之系统调用
    nodejs之路-[0]安装及简易配置
    动态加入改动删除html表格内容
    socket网络编程基础小记
    LeetCode OJ Minimum Depth of Binary Tree 递归求解
  • 原文地址:https://www.cnblogs.com/love9happy/p/5382958.html
Copyright © 2011-2022 走看看