文档章节

CSS预处理器SASS用法和koala工具的使用

webphp
 webphp
发布于 2017/07/26 11:28
字数 1095
阅读 29
收藏 0
点赞 0
评论 0
    最近在学习前端的时候,发现了一个SASS(CSS预处理器),感觉在前端布局写css样式来说是相当强大,效率又高,在用到SASS的时候感觉很爽。
    首先说一下传统的CSS,在程序员的眼里感觉是一个很麻烦的东西,没有变量,也没有运算,还没有条件语句,感觉写的相当费事。     在人们都感觉费事的同时,真有牛人把CSS加入了编程的元素,这就是(CSS预处理器),是一种专门的编程语言,进行网而设计,然后在编译成正常的CSS文件,但是CSS预处理器中有很多,今天就说一下SASS。
    在百度SASS以后,在百度百科中看到了SASS的安装:     如下:SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。假定你已经安装好了Ruby,接着在命令行输入下面的命令:gem install sass然后,就可以使用了。     今天咱们在这里就跳过这一步,在我编程的过程中感觉越省事越好。推荐大家使用一款使用工具-Koala.     首页说一下Koala, koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。下载地址:http://koala-app.com/index-zh.html 使用这款工具也相当省事,安装成功以后,打开此工具,在你的项目目录下创建css目录,然后在css目录下创建style.scss ,然后装css文件夹直接拖到工具内,接着用sublime Text编辑style.scss,工具自动会编释一份style.css文件,真正在网页中使用的是style.css文件。
    在使用koala工具的时候,在写样式中添加汉字的时候会提示错误,解决方法:找到工具的安装目录,然后找到以下目录/koala/rubygems/gems/sass-3.4.9/lib/sass/目录有一个engine.rb文件,打开rb文件,在require底部添加
    Encoding.default_external = Encoding.find('utf-8')
    接着说一下SASS的书写规则和语法:
一、变量     SASS允许使用变量,所在变量以$开头
$color_blue :#1875e7;
div{
color : $color_blue;
}
    如果变量要在css的属性中出现的话,就必须需要写在#{}中
$side : left;
 
.box{
border-#{$side}:5px solid #f5f5f5;
}
二、计算功能
    SASS可以在代码中做运算
.box{
margin:(14px/2);
top :50px+30px;//当前这些值还可以定义变量
}
三、嵌套
    SASS允许选择器嵌套
ul{
  li{
    a{
       color :#dedede;
     }
  }
}
/*编释以后的代码为*/
ul li a { color : #dedede;}
    属性也可以嵌套,比如border-color属性,但是border后面必须加上冒号
p{
 
  border:{
     color :#dedede
  }
 
}
    在嵌套的代码中,也可以用&符号引用父元素,
ul{
  li{
 
    a{
       &:hover{ color:#dedede}
     }
   }
 
}
四、代码的注释
    SASS共用两种注释
    标准的CSS注释/* ... */会保留到编译后的文件中     单行注释//…… 只保留在SASS的源文件中,编译后被省略     重要注释如版权之类的/*! .......*/
 五、代码的重用
        5.1 继承
        SASS允许一个选择器继承另一个选择器,语法( @extend  类名)
.class_one{
  line-height:30px;
}
 
.class_two{
   @extend.class_one;
   font-size :25px
}
        5.2Mixin          重用代码块 语法   @mixin 定义一个代码块
@mixin left{
 
float: left;
   margin-left :10px
}
使用@include命令可以调用mixin
.box{
 
   @include left;
}
mixin的强大之处,在于可以指定参数和缺省值
@mixin left( $right_v:10px){
 
float: left;
   margin-right : $right_v;
 
}
那么在使用的的时候,可以根据项目的不同设置不同的值
.box{
  @include left(30px);
}
5.3、插入文件
@import命令,用来插入外部文件
@import"path/filename.scss"
@improt"body.css"
六、高级用法
6.1、条件语句
@if可以用来判断
span{
  @if1+1==2{border:1px solid;}
  @if5<3{border:2px dotted;}
}
还可以加上@else命令
@if lightness( $color )>30%{
  background-color :#000;
}@else{
  background-color : $fff;
}
6.2、循环语句
SASS-for循环
@for $i from1 to 10{
   .border-#{$i}{
     border:#{i}px solid blue;
   }
}
//同时也支持while循环
$i :6;
@while $i >0{
  .item-#{$i}{
     width :2px* $i;
   }
   $i: $i -2;
}
@each 命令,作用与for类似
@each $member in a, b, c, d{
 .#{$member}{
    background-image : url("/image/#{$member}.jpg");
 }
 
}
6.3、自定义函数
SASS允许用户编写自己的自定义函数
@functiondouble($n){
  @return $n *2;
}
  
#sidebar {
  width :double(5px);
}
 

© 著作权归作者所有

共有 人打赏支持
webphp
粉丝 1
博文 91
码字总数 91650
作品 0
海淀
程序员
Less

导语:最近在网上看到一款前端预处理器语言图形编译工具koala,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac...

大仁孙 ⋅ 2016/07/22 ⋅ 0

SASS界面编译工具——Koala的使用

转载自: http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html 《SASS界面编译工具——Codekit的使用》一文中图解了"CodeKit"图形工具编译SASS项目。由于CodeKit是一款付费工具,...

ahl123 ⋅ 2017/05/05 ⋅ 0

Sass和LESS-动态CSS技术

一、简介 二、Sass/Scss的使用 变量 注释 中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写,以及简单的样式说明。但是,你也并不希望每个浏览网站源码的人都能看到所...

dhb_oschina ⋅ 2016/05/17 ⋅ 0

前端预处理器语言图形编译工具--Koala App

koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。 功能特性 多语言支...

叛道 ⋅ 2013/07/21 ⋅ 0

SASS用法指南

学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有...

Zoker ⋅ 2014/02/10 ⋅ 0

less的简单实用介绍

less是css的预处理语言,作为 CSS 的一种扩展,不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法。 编译方式 1.使用koala编译 Koala 是一款由国人开发的开源预处理语言图形编译工具...

jywud ⋅ 2016/06/26 ⋅ 0

SASS 用法指南

学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有...

小编辑 ⋅ 2012/06/25 ⋅ 13

sass用法指南

学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有...

DanielYue ⋅ 2017/01/06 ⋅ 0

SASS用法指南

学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有...

阮一峰 ⋅ 2012/06/19 ⋅ 0

Sass用法指南

学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有...

xihun ⋅ 2014/03/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud构建微服务架构—创建“服务注册中心”

创建一个基础的Spring Boot工程,命名为eureka-server,并在pom.xml中引入需要的依赖内容: <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-par......

itcloud ⋅ 17分钟前 ⋅ 0

拖动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>event</title> <style> #box { width: 100px; height: 100px; background-color: aquamarine; position: absolute; } </style......

fyliujj ⋅ 20分钟前 ⋅ 0

es6 polyfill array

polyfill之javascript函数的兼容写法——Array篇 1. Array.isArray(obj) if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === '[objec......

球球 ⋅ 22分钟前 ⋅ 0

kibana启动异常

检查一下:kibana.yml 每一对key:value中,冒号之后应有空格。

增删改查1 ⋅ 24分钟前 ⋅ 0

js修改img的src属性刷新图片时的图片缓存问题

问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过...

HaierBrother ⋅ 24分钟前 ⋅ 0

Mysql

1.Jdbc Url 设置allowMultiQueries为true和false mysql的批量更新是要我们主动去设置的, 就是在数据库的连接url上设置一下,加上* &allowMultiQueries=true *即可。 参数名称 参数说明 缺省...

瑟青豆 ⋅ 27分钟前 ⋅ 0

mysql导出导入表结构与数据

当我们需要进行数据迁移时,mysql自带的mysqldump会是最好的方式。 1.导出某张表的结构和数据 首先,我们应当使用服务器,打开终端,连接到所需要导出的表所在的服务器上。执行命令: mysqld...

hengbao5 ⋅ 27分钟前 ⋅ 0

世界杯也走向“比拼”大数据的时代

《日本经济新闻》6月19日报道称,俄罗斯足球世界杯已于6月14日揭开战幕。作为第21次举办的足球世界杯,如何活用大数据有可能成为决定各支球队胜负的重要因素。从对阵球队的分析到战术建议,还...

加米谷大数据 ⋅ 28分钟前 ⋅ 0

金额转为千分制,金额转中文大写

金额转关为大写 /** 数字金额大写转换(可以处理整数,小数,负数) */ function digitUppercase(n){ if(!n) reutrn "" let fraction = ['角', '分']; let digit = [...

YXMBetter ⋅ 31分钟前 ⋅ 0

开发利器JRebel部署SpringBoot项目

不要以为年纪轻轻就跌倒了人生谷底,未来还有更大的下降空间等着你。 idea下载和安装JRebel 激活JRebel 访问https://my.jrebel.com/ 使用facebook或twitter登录 勾选 Build project automati...

郑龙飞 ⋅ 36分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部