- 博客(14)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 CSS原生变量“--”和var()
参考资料：https://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/http://www.ruanyifeng.com/blog/2017/05/css-variables.html在任何语言中，变量的有一点作用都是一样的，那就是可以降低维护成本，附带还有更高性能，文件更高压缩率的好处。随着CSS预编译工...
2018-11-30 17:10:37
1882
转载 简单总结下opacity、transparent以及rgba
这几个概念最开始学的时候只是有个大致印象，现在复习这部分的知识点，发现不仔细区分一下，还真有点混乱。三者共同点是都和透明有关。先分着来说一下：1、opacity用来设置元素的不透明级别，从 0.0 （完全透明）到 1.0（完全不透明）。2、transparent是颜色的一种，这种颜色叫透明色。3、rgba(r,g,b,a)稍复杂一点，r：红色值；g：绿色值；b：蓝色值。三个颜色值组...
2018-11-30 16:12:15
1300
原创 compass核心模块-utilities--Genral--float mixin的使用
"double-margin bug in IE5/6"是浮动领域一个经典的bug.This module provides mixins that help you work around the double-margin bug in IE5/6.This file can be imported using: @import "compass/utilities/general...
2018-11-21 21:13:10
219
转载 清除浮动的经典方法与详解
A new micro clearfix hackThe clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further re...
2018-11-21 11:13:03
159
转载 compass项目配置文件config.rb的设置与详解
compass项目配置文件config.rb当我们创建一个compass项目时，在项目文件里能看到两个文件夹和一个配置文件，如下图所示：在使用compass编译代码时，可能会遇到多余的注释，以及图片路径问题。对于刚接触compass的人来说非常苦恼，可能找了半天也没有解决问题，今天就来讲讲config.rb对代码输出效果的影响。第一次打开config.rb文件时是这样：先从...
2018-11-20 16:26:05
1065
转载 Invalid GBK character错误
问题描述在windows7上面，通过ruby编译scss时，发现编译报错，内容如下：Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss': Invalid GBK character "\xE3" o...
2018-11-15 21:34:16
1219
原创 Sass和css中@import的区别，以及如何在sass中还使用css的@import
1、CSS中原生的@import指令两大弊端（1）需要放在代码最前边（2）对性能不利，容易造成渲染阻塞2、
2018-11-15 21:27:46
4647
原创 compass的安装及使用，以及常见命令行指令与注意事项、Compass核心模块
1、compass官网：compass-style.orgcompass是一个开源的书写框架正确安装完ruby之后，使用gem install compass安装1、compass create learn-compass-init:通过compass直接创建一个compass框架项目2、@import “compass/reset”：compass 内置浏览器重置样式模块2、...
2018-11-15 21:27:22
5835
原创 常见的sass命令行指令
1、sass main.scss main.css:将scss文件转换为css文件2、sass-convert main.scss main.sass:将scss格式转换为sass格式
2018-11-15 19:29:49
1643
原创 window环境下Ruby和Sass的最新安装步骤详解
步骤一：进入ruby的官网https://rubyinstaller.org/，界面展示如下：点击Download,进入下载页面步骤二：根据自己的电脑配置选择相应的ruby安装包进行下载，我的电脑是win7，64位的，根据右侧英文文档第一项的推荐，选择了=》Ruby+Devkit2.5.3-1(x64)步骤三：Ruby 安装文件下载好后，可以按应用软件安装步骤进行安装 Ruby...
2018-11-13 17:07:26
388
原创 纯CSS制作滑动切换开关
效果演示：代码部分：<input type="checkbox" class="toggle"><div class="inner"></div> body{ margin:0; height:100vh; background-color:#8FBC8B; display:flex; justify-con..
2018-11-01 21:42:57
1624
原创 纯CSS实现立体感圆盘（立体化按钮），点击有图
在线编辑：https://codepen.io/sunnercms/<div class="inner"> <div class="disc"> </div></div>.inner{ position:relative; width:300px; height:300px; border-radius:150p...
2018-11-01 21:12:24
7638
原创 Sass进阶篇
第一章：Sass的控制命令1-2.@if@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控...
2018-11-01 13:32:11
612
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人