一、起因

最近我在学习 SASS,通过它,可以将 CSS 像编程语言一样书写。

在最近之前,我又学习了 Flex 布局,用起来很方便。

所以,我学习了 Bulma 这个纯 CSS 框架——使用 Flex 布局(浏览器支持 IE10+),源码使用 SASS 编写。

在开始进入 Bulma 学习之前,先对“Flex 布局”和“SASS”的概念进行介绍。

二、Flex 布局

2.1 基本概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。

  1. .box {
  2. display: flex;
  3. }

容器的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

2.2 容器的属性

以下6个属性设置在容器上。

  1. flex-direction:默认值 row,表示项目在水平方向、从左向右排列。
  2. flex-wrap:默认值 nowrap,表示项目在水平方向排列时,不论有多少,都不换行。这样太固执了,你可以设置为 wrap,这样在水平空间不够时,后面的项目就会自动换行了。
  3. flex-flow:是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值你可能会想到—— row nowrap。非必要时,不设置这个属性,单独设置上面的两个属性会好些。
  4. justify-content:项目水平方向上的对齐方式,默认 flex-start,左对齐。还可取值 center,表示居中对齐。
  5. align-items:项目垂直方向上的对齐方式,默认 stretch,在项目未设置高度或设为 auto,项目将占满整个容器的高度。
  6. align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。默认 stretch,跟 align-items 默认情况差不多,不过这里是多行项目占满整个容器的高度。

2.3 项目的属性

  1. order:项目的排列顺序,默认为 0。数值越小,排列越靠前。
  2. flex-grow:项目的放大比例,默认为 0,总是不放大。如果属性值都为 1,项目将等分剩余空间(如果有的话)。
  3. flex-shrink:项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小。如果一个项目的 flex-shrink 属性为 0,其他项目都为 1,则空间不足时,前者不缩小。
  4. flex-basis:项目占据的水平方向上的宽度(在分配多余空间之前)。默认值为 auto。可以设为跟 width 属性一样的值(比如 350px),则项目将占据固定空间。
  5. flex:是 flex-grow, flex-shrink 和 flex-basis的简写形式,默认值为0 1 auto。后两个属性可选。
  6. align-self:个性化“align-items”,即允许单个项目有与其他项目不一样的对齐方式,可覆盖父元素 align-items 属性设置。

三、SASS

SASS 是 "CSS预处理器"(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。

原生 CSS 代码很难重用也无法进行数学运算,SASS 提供了这些功能。下面介绍它的基本用法。

3.1 变量

SASS允许使用变量,所有变量以$开头。

  1. $blue : #1875e7
  2. div
  3. color : $blue

如果变量需要镶嵌在字符串之中,就必须需要写在 #{} 之中。

  1. $side : left
  2. .rounded
  3. border-#{$side}-radius: 5px

3.2 嵌套

SASS允许选择器嵌套。比如,下面的CSS代码:

  1. div h1 {
  2. color: red
  3. }

可以写成:

  1. div
  2. hi
  3. color: red

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

  1. a
  2. &:hover
  3. color: #ffb3ff

3.3 注释

SASS共有两种注释风格。

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

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

/* 后面加一个感叹号(!),表示这是“重要注释”。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

  1. /*!
  2. 重要注释!
  3. */

3.4 Mixin

Mixin 是可以重用的代码块。使用 @mixin 命令,来定义这样一个代码块。

  1. @mixin left
  2. float: left
  3. margin-left: 10px

使用 @include 命令,调用这个 mixin。

  1. div
  2. @include left

mixin 的强大之处,在于可以指定参数和缺省值。

  1. @mixin left($value: 10px)
  2. float: left
  3. margin-right: $value

使用的时候,根据需要加入参数:

  1. div
  2. @include left(20px)

给 Mixin 传递内容块,举个例子:

  1. @mixin apply-to-ie6-only
  2. html
  3. @content
  4. @include apply-to-ie6-only
  5. #logo
  6. background-image: url(/logo.gif)

会被编译为

  1. * html #logo
  2. background-image: url(/logo.gif)

这种语法在 Bulma 中被使用,用在对特定元素在不同的媒体查询情况下的样式设定。

3.5 插入文件

@import 命令,用来插入外部文件。

  1. @import "path/filename.sass"
  2. // 或者
  3. @import "path/filename"

如果插入的是 .css 文件,则等同于 CSS 的 import 命令。

  1. @import "foo.css";

3.6 自定义函数

SASS 允许用户编写自己的函数。

  1. @function double($n)
  2. @return $n * 2
  3. #sidebar
  4. width: double(5px)

四、深入学习

4.1 Flex 布局

  1. http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
  2. http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

4.2 SASS

  1. http://www.ruanyifeng.com/blog/2012/06/sass.html
  2. http://sass-lang.com/documentation/file.SASS_REFERENCE.html

(完)

使用 Bulma的更多相关文章

  1. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

  2. Bulma - 基于 Flexbox 的现代化的 CSS 框架

    Bulma 是一个基于 Flexbox 的现代化的 CSS 框架,设计的初衷就是移动优先(Mobile First),模块化设计,可以轻松用来实现各种简单或者复制的内容布局,浏览器支持:浏览器支持:C ...

  3. bulma入门

    http://www.ruanyifeng.com/blog/2017/10/bulma.html

  4. Bulma 源码解析之 .columns 类

    {说明} 这一部分的源码内容被我简化了,另外我还额外添加了一个辅助类 is-grow. .columns // 修饰类 &.is-centered justify-content: cente ...

  5. Bulma 源码解析之 .container 类

    Bulma 的 .container 类是这样实现的. .container position: relative // 不设置桌面以下设备的 container +desktop margin: 0 ...

  6. Bulma 中的媒体查询

    在 Bulma 中将设备分为 6 类:手机.平板.触屏设备.桌面.宽屏和大屏.提供了四个阈值. // sass/utilities/variables.sass $tablet: 769px !def ...

  7. Bulma 源码结构

    源码基于 Bulma 0.4.0 版本. 一.入口文件 bulma.sass bulma.sass 是 Bulma 使用 SASS 编译的入口文件. sass bulma.sass css/bulma ...

  8. CSS、Bulma介绍

    文章目录 一.序章 二.CSS 基础 1. CSS 介绍 2. CSS 语法 3. CSS常用元素 1.颜色 2.字体大小 3.宽高 4.盒模型(单独拿出来讲) 5.背景 4.1样式和内容分离 4.2 ...

  9. Bulma CSS - 响应式

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

随机推荐

  1. grpc asp.net core 集成时一些配置的说明

    一  什么是grpc google出了一款分布式通讯框架:grpc.我想这也不是新的东西了,在13年的一个项目中,用在了数据层和业务端之间的通讯上,当时并没有觉得怎么样,因为wcf很轻松的也可以可以实 ...

  2. Httpclient远程调用WebService示例

    我们将Web Service发布在Tomcat或者其他应用服务器上后,有很多方法可以调用该Web Service,常用的有两种: 1.通过浏览器HTTP调用,返回规范的XML文件内容      2.通 ...

  3. win8.1系统相关

    win8.1系统相关 信息时代,系统更新速度非常快,十一月初,同事在网上花5元买了一个win8.1系统激活码,之后两周,我电脑由于系统故障,准备重装系统,借助他的系统,但无法激活,借用他购买的账号也不 ...

  4. 执行.class文件

    java packageName.className即可 但是注意,如果是有包的,这段指令一定是packageName的上层目录(即bin目录)执行!

  5. git ssh登录

    .ssh下创建config文件 其内容: Host ipIdentityFile ~/.ssh/私钥文件名Port 22User git服务器的账号,不是git账号名(私钥文件名才是git账号名) 注 ...

  6. ABP 学习系列 - 目录

    一.ABP 学习系列 - 入门介绍之单表 http://www.cnblogs.com/yabu007/p/8067694.html 二.ABP 学习系列 - 入门介绍之多表 http://www.c ...

  7. ucos ii 百度官方介绍

          μC/OS II(Micro-Controller Operating System Two)是一个可以基于ROM运行的.可裁剪的.抢占式.实时多任务内核,具有高度可移植性,特别适合于微处 ...

  8. 机器学习:集成学习(集成学习思想、scikit-learn 中的集成分类器)

    一.集成学习的思想 集成学习的思路:一个问题(如分类问题),让多种算法参与预测(如下图中的算法都可以解决分类问题),在多个预测结果中,选择出现最多的预测类别做为该样本的最终预测类别: 生活中的集成思维 ...

  9. GUI练习中

    总结:JFrame和Frame是有很大差别的. 不要混淆.否则方法是不能成功调用的 特别是背景色:JFrame.对象f在main里无法调用背景色前景色都不想显示 一下是书上的一段代码,编译错误,但是可 ...

  10. Lib之过?Java反序列化漏洞通用利用分析

    转http://blog.chaitin.com/ 1 背景 2 Java反序列化漏洞简介 3 利用Apache Commons Collections实现远程代码执行 4 漏洞利用实例 4.1 利用 ...