• SASS 的相关函数


    简介

    1. SASS是Syntactically Awesome StyleSheets的缩写.

    2. CSS预处理器语言(用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题)
    3. Sass并不是css的替代品,它只是让css变得更加高效、可维护,也不必去修改编译后的css文件
    4. CSS 预处理器语言,目前比较流行的Sass、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS

    SASS与LESS区别

    Sass: 基于ruby,在服务器端处理

    Less: 基于javascript,在客户端处理,需额外时间处理代码后输出css

    安装

    先安装Ruby,然后gem install sass

    转译

     建一个input.scss,执行sass input.scss output.css,会生成一个对应的output.css文件

       指定输出风格命令: sass --style compressed input.scss:output.css

       输出样式的风格可以有四种选择,默认为nested

      --nested:嵌套缩进的css代码

      --expanded:展开的多行css代码

      --compact:简洁格式的css代码

      --compressed:压缩后的css代码

    监听

     实时监听单个文件命令: sass --watch --style expanded loader.scss:loader.css

       实时监听多个文件命令: sass --watch (sass文件夹名):(css文件夹名)

     带风格的监听sass --watch --style expanded sass/loader.scss:css/loader.css

    类型

       Sass有两种后缀名(Sass、Scss)
       主要区别在书写格式上
         --sass文件是缩进式的写法,没有括号, 对格式要求比较严谨,末尾不能有分号
         --scss文件的写法和css一致
       Sass与Scss之间的转换
       --将Sass转换为Scss: sass-convert style.sass style.scss
         --将Scss转换为Sass: sass-convert style.scss style.sass

    注释

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

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

    @import

     css有一个@import规则,它允许在一个css文件中导入其他css文件。然而只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢

     Sass也有一个@import规则,但Sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求。
     在少数几种情况下会被编译成 CSS 的规则, 如下:
      1. 如果文件的扩展名是 .css => @import "foo.css"
      2. 如果文件名以 http:// 开头 => @import "http://foo.com/bar"
      3. 如果文件名是 url() => @import url(foo)
      4. 如果包含了任何媒体查询(media)=> @import "foo" screen
     前提如果我们编译监听的是文件夹, 有一个 SCSS文件需要引入, 但是你又不希望它被编译为一个 CSS 文件, 可以在文件名前面加一个下划线,像往常一样引入。_text.scss => @import 'text'

    @debug, @warn, @error,  sass -i

    用来调试的,Sass 代码在编译错时,在命令终端会输出你设置的提示 Bug

     sass -i, 命令行使用函数

    Sass的基本特性-运算

     加 +、减 -、乘 *、除 /和取模 %
     同种单位类型不同单位间可以做转换
       乘法 * 只允许一个有单位
       除法 / 用常量进行一次计算时,运算要用括号包起来, 否则当成字符串, 其他不需要
       通过括号来修改他们的运算先后顺序
       可以用于变量计算,数字运算,颜色运算,字符运算
       所有算数运算都支持颜色值,并且是分段运算的。也就是说,红、绿和蓝各颜色分段单独进行运算
       字符运算是否带 '' 以 + 左侧的字符串是否加 '' 为准

    Sass的控制命令

       @if:@if @else if @else {:&.moveIn}
       if($condition,$if-true,$if-false) Miscellaneous(三元条件)函数.有两个值,当条件成立返回一个值,当条件不成立时返回另一个值:
       @for: @for $i from <start> through / to <'end'> 区别:to不包含<'end'>
       @while: @while 条件 {}
       @each: @each $var in <'list'> / @each $key,$value in <'list'>
       {可以使用插值#{}}

    Sass的字符串函数

       unquote($string):函数只能删除字符串最前和最后的引号(双引号或单引号),如果字符没有带引号,返回的将是字符串本身 {:&.moveIn}
       quote($string): 函数主要用来给字符串添加引号.如果字符串自身带有引号会统一换成双引号"".而且字符串中间有单引号、空格、特殊符号(除了-和_)时,需要用单引号或双引号将字符串括起,否则编译的时候将会报错

       To-upper-case($string): 函数将字符串小写字母转换成大写字母
       To-lower-case($string): 函数将字符串转换成小写字母

    Sass的数字函数

       percentage($value):将一个不带单位的数转换成百分比值
       round($value):将数值四舍五入,转换成一个最接近的整数
       ceil($value):将大于自己的小数转换成下一位整数
       floor($value):将一个数去除他的小数部分
       abs($value):返回一个数的绝对值
       min($numbers…):找出几个数值之间的最小值
       max($numbers…):找出几个数值之间的最大值
       random(): 获取[0,1)随机数

    列表函数

       length($list):返回一个列表的长度值
       nth($list, $n):返回一个列表中指定的某个标签值, $n 必须是大于 0 的整数
       join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表,只能两个,可以多个join,$separator有comma和space两个值
       append($list1, $val, [$separator]):将某个值放在列表的最后
       zip($lists…):将几个列表结合成一个多维的列表,每个单一的列表个数值必须是相同的zip(1px 2px 3px,solid dashed dotted,green blue red) => 1px solid green, 2px dashed blue, 3px dotted red
       index($list, $value):返回一个值在列表中的位置值,不存在是false

    Introspection函数(判断型函数)

       type-of($value):返回一个值的类型,返回值:number(数值型),string(字符串型),bool(布尔型),color(颜色型)
       unit($number):返回一个值的单位,乘除可以返回多单位组合,加减除了px 与 cm、mm组合, 返回px, 其他报错
       unitless($number):判断一个值是否带有单位,不带单位返回的值为true,带单位返回的值为 false
       comparable($number1, $number2):判断两个值是否可以做加、减和合并,可以返回true,不可以返回false

    Map

       map-get($map,$key): 根据给定的key值,返回map中相关的值
       map-keys($map): 返回map中所有的key
       map-values($map): 返回map中所有的value, 如果有相同的value也将会全部获取出来。
       map-has-key($map,$key): 根据给定的key值判断map是否有对应的value值,如果有返回true,否则返回 false
       map-merge($map1,$map2): 将两个map合并成一个新的map,如果 $map1 和 $map2 中有相同的 $key 名,那么$map2 中的 $key 会取代 $map1 中的
       map-remove($map,$key): 从map中删除一个key,返回一个新map
       keywords($args): 动态创建 map 的函数, 可以通过混合宏或函数的参数变创建 map, 参数也是成对出现, 其中 $args 变成 key(会自动去掉$符号),而 $args 对应的值就是value。

    颜色函数 - RGBA函数

      R红色值(正整数/百分数)、 G绿色值(正整数/百分数)、 B蓝色值(正整数/百分数)、 A透明度(0~1)
      rgba($red,$green,$blue,$alpha): 将一个rgba颜色转译出来,和未转译的值一样
      rgba($color,$alpha): 将一个颜色转换成rgba颜色
      red($color): 从一个颜色中获取其中红色值
      green($color): 从一个颜色中获取其中绿色值
      blue($color): 从一个颜色中获取其中蓝色值
      mix($color-1,$color-2,$weight): $color-1 和 $color-2 指的是你需要合并的颜色(任何表达式|颜色变量),$weight 为合并的比例(0~100%), 默认50%. 如果指定的比例是 25%,这意味着第一个颜色所占比例为 25%,第二个颜色所占比例为75%
      invert($color): 根据颜色的R、G和B单独进行反相,而透明度不变。

    颜色函数 - HSLA函数

      H色相(正整数)、S饱和度(百分数)、L亮度(百分数)、A透明度(0~1)
      hue($color): 从一个颜色中获取色相(hue)值, 红色0/360, 绿色120, 蓝色240;
      saturation($color): 从一个颜色中获取饱和度(saturation)值
      lightness($color): 从一个颜色中获取亮度(lightness)值
      hsl($hue,$saturation,$lightness): 通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色
      hsla($hue,$saturation,$lightness,$alpha): 通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色

      adjust-hue($color,$degrees): 改变颜色的色相值,$degrees单位deg,色相(-360,360) 之间,负值逆时针转,正值顺时针转。25deg相当于在355deg色相基础上增加30deg
      complement($color): 返回一个补充色,相当于adjust-hue($color,180deg)
      lighten($color,$amount): 改变颜色的亮度值,让颜色变亮;$amount百分比
      darken($color,$amount): 改变颜色的亮度值,让颜色变暗
      saturate($color,$amount): 改变颜色的饱和度值,让颜色更饱和
      desaturate($color,$amount): 改变颜色的饱和度值,让颜色减少饱和
      grayscale($color): 将一个颜色变成灰色,相当于desaturate($color,100%);

    颜色函数 - Opacity 函数

      alpha($color) /opacity($color):获取颜色透明度值
      rgba($color, $alpha):改变颜色的透明度值
      opacify($color, $amount) / fade-in($color, $amount):使颜色更不透明;$amount(0,1)
      transparentize($color, $amount) / fade-out($color, $amount):使颜色更加透明

    @media

      有点类似 JS 的冒泡功能一样,如果在.sidebar样式中使用 @media 指令,编译后, 它将冒泡到外面,将@media提到.sidebar样式的外边
      @media #{$media} and ($feature: $value) and ($feature: $value) and ...
      $media: all, print, screen, only screen, ...;
      ($feature: $value): (orientation:portrait), (orientation:landscape), (min-device-pixel-ratio: 1.5), (max- 720px), ...

    @mixin

      重用一整段Sass代码,能够给他们传递参数
      @mixin function($condition) {}
      不足之处是会生成冗余的代码块, Sass在调用相同的混合宏时,并不能智能的将相同的样式代码块合并在一起

    @include

       与@mixin配套,引用@mixin的function
       @include function($condition);

    @extend

      用来扩展选择器或占位符
      %(占位符选择器),取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起。

    @at-root

      跳出根元素, 跳到最外层

    mixin VS extend VS %

      mixin: 不会自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余,但是可以传参数
      extend: 会将使用继承的代码块合并到一起,通过组合选择器的方式向大家展现, 但是他不能传变量参数
      %: 和使用继承基本上是相同,只是不会在代码中生成占位符样式 的选择器。那么占位符和继承的主要区别的,占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中
      个人建议
        --如果代码块中涉及到变量,建议使用mixn来创建相同的代码块
        --如果代码块不需要传任何变量参数,而且有一个基类已在文件中存在,那么建议使用extend, 若继承的样式html不需要使用此样式, 则继承的样式用%。

    Other

    transform:rotate(360deg) skew(-20deg) scale(1.0) translate(100px,0);
      1. transform:rotate(): 旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同
      2. transform:skew(): 倾斜
      3. transform:scale(): 比例;如果要放大2倍,须写成“2.0”,缩小则为负“-”
      4. transform:translate(): 变动,位移;如下表示向右位移120像素,transform: translate(120px,0); 如果向上位移,transform: translate(0,-120px)

    box-shadow:inset x-offset y-offset blur-radius spread-radius color;
      1. 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
      2. X-offset:如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边
      3. Y-offset:如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部
      4. 阴影模糊半径:此参数是可选,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊
      5. 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小
      6. 阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数 

    父元素选择器

    父元素选择器&
    A>B 表示选择A元素的所有子B元素。
    A(空格)B与A>B的区别在于,A B选择所有后代元素,而A>B只选择一代。
    # A+B表示HTML中紧随A的B元素。
    # &:上级选择器,+: 兄弟元素,>:直接子元素
    nth-child是个伪类的用法,如p:nth-child(2)就表示在p的父元素中选择位居第二位的p

    网址:http://sass.bootcss.com/docs/sass-reference/#nested_rules

        http://www.ruanyifeng.com/blog/2012/06/sass.html

       http://www.w3cplus.com/preprocessor/sass-other-function.html
  • 相关阅读:
    暑期总结1
    python +request 之数据库断言
    django接口开发之restful风格
    python +unittest 测试报告的生成
    Django学习笔记七----操作models修改数据库表结构
    Django学习笔记七----操作models,对数据库进行操作
    django学习六--操作model创建数据库表
    appium+python app自动化
    django学习五----redirect和,HttpResponsePermanentRedirect重定向
    html action属性
  • 原文地址:https://www.cnblogs.com/floraCnblogs/p/sass-summary.html
Copyright © 2020-2023  润新知