分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

css预处理器sass入门学习

发布时间:2023-09-06 01:30责任编辑:白小东关键词:暂无标签

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 */.

待续

css预处理器sass入门学习

原文地址:http://www.cnblogs.com/yehui-mmd/p/8035170.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved