css预处理器sass学习

SASS

叫做css预处理器,他的基本思想是用一门专门的编程语言来进行页面样式的设计,然后在编译成正常的css文件。

Sass的用法

  • 安装
    sass是用ruby语言写的,所以我们在安装sass之前要先安装ruby(ruby安装自行百度),执行下面命令安装:

      gem install sass
    
  • 使用
    sass就是普通的文本文件,后缀名为.scss。然后让我们用sass的语法写好文件之后,需要编译成.css文件才能供html文件使用(即通过link标签引入html文件),那么我们就可以使用命令行或是git工具,输入:

      sass test.scss test.css #假设我们的sass文件名为test
    

下面是一个具体编译sass的例子:
首先我们在文件夹中建上图这样的两个文件:.html、.scss
这里写图片描述
然后在两个文件中分别写入代码:

	<!-- html -->
	<!DOCTYPE html>
	<html>
	<head>
		<title>css预处理器sass test</title>
		<link rel="stylesheet" type="text/css" href="test.css">
	</head>
	<body>
	    <div>一个关于css预处理器sass的小练习</div>
	</body>
	</html>
	
	/* scss */
	$blue:red;
	
	div{
		color:$blue;
	}

然后我们在用git将scss代码编译成.css代码,将得到如下三个文件,其中一个就是我们需要的.css文件。
这里写图片描述
这里写图片描述
运行html将得到如下结果。
这里写图片描述

sass语法基础

  • 变量
    sass是有变量的概念的,所以的变量都以$开头。

      $blue:red;
      
      div{
      	color:$blue;
      }
    

如果变量需要嵌入在字符串中,我们就必须把他们放在#{}中。

	   $side : right;
	  .rounded {
	    border-#{$side}-radius: 5px;
	  }
  • 计算功能
    sass允许代码中使用算式:

      $var:40;
      body {
        margin: (14px/2);
        top: 50px + 100px;
        right: $var * 10%;
      }
    
  • 嵌套
    就是我们的div及标签盒子可以嵌套设置css

      div {
        p {
          color:red;
        }
      }
    

属性也可以嵌套:border-color
border后面必须加冒号

	div {
	  p {
	    border: {
	      color: red;
	    }
	  }
	}

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

	a {
	  &:hover { 
	        color: #ffb3ff; 
	    }
	}
  • 注释
    和css文件注释一样 /* comment */.

代码的重用

  • 继承
    Sass允许一个选择器继承另一个选择器,使用@extend命令来实现:
  • Mixin
    Mixin有点像C语言的宏,是可以重用的代码,使用@mixin命令来定义一个代码块,在使用@include命令来调用这个mixin,就可以实现一个代码块的重用。
    mixin的强大之处,在于他可以指定参数和缺省值。

    使用的时候可以根据需要加入参数
posted @ 2017-12-13 22:09  美美王子  Views(340)  Comments(0Edit  收藏  举报