zoukankan      html  css  js  c++  java
  • SASS入门

    变量

    sass中可以定义变量,方面统一修改和维护

    $primaryColor:#222;
    
    body{
    	color:$primaryColor
    }
    

    嵌套

    sass可以进行选择器嵌套,表示层级关系,看起来很优雅整齐。

    	nav{
    		ul{maring:0;padding:0;list-style:none;}
    		li{display:inline-block;}
    		a{
    			display:block;
    			padding:6px 12px;
    			text-decoration:none;
    		}
    	}
    

    导入

    sass中导入其他sass文件,最后编译一个css文件,优于纯css的@import

    html,
    body,
    ui,
    ol{
    	margin:0;
    	padding:0;
    }
    
    @import 'reset';
    body{
    	font-size: 100%;
    	background-color:#efefef;
    }
    

    mixin

    sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用,从此处理css3的前缀兼容轻松便捷。

    @mixin box-sizing($sizing){
    	-webkit-box-sizing:$sizing;     
           -moz-box-sizing:$sizing;
                box-sizing:$sizing;
    }
    .box-border{
    	border:1px solid #ccc;
    	@include box-sizing(border-box);
    }
    

    扩展/继承

    sass可以通过@extend来实现代码组合声明,使代码更加优越简洁。

    .message{
    	border:1px solid #ccc;
    	padding:10px;
    	color:#333;
    }
    .success{
    	@extend.message;
    	border-color:green;
    }
    

    运算

    sass 可进行简单的加减乘除运算等

    .container{100%}
    article[role="main"]{
    	float:left;
    	600px/960px*100%;
    }
    aside[role="complimentary"]{
    	float:right;
    	300px/960px*100%;
    }
    

    颜色

    sass中集成了大量的颜色函数,让变换颜色更加简单

    $linkColor:#08c;
    a{
    	text-decoration:none;
    	color:$linkColor;
    	$:hover{
    		color:darken($linkColor,10%);
    	}
    }
    
  • 相关阅读:
    Bom入门
    Dom入门
    JavaScript对象
    Ultra-QuickSort——[归并排序、分治求逆序对]
    UVA 11212 Editing a Book [迭代加深搜索IDA*]
    Anagram——[枚举全排列]
    Black Box--[优先队列 、最大堆最小堆的应用]
    Argus--[优先队列]
    UVa1601
    UVa 10603 Fill [暴力枚举、路径搜索]
  • 原文地址:https://www.cnblogs.com/xiaopen/p/sass_basic.html
Copyright © 2011-2022 走看看