sass折腾

1
 $blue : #1875e7; 
  div {
   color : $blue;
  }
2
可以嵌套
 div {
    hi {
      color:red;
    }
  }

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

 a {
    &:hover { color: #ffb3ff; }
  }
3 可以继承
@extend
  .class1 {
    border: 1px solid #ddd;
  }
 .class2 {
    @extend .class1;
    font-size:120%;
  }
4Mixin代码块
  @mixin left {
    float: left;
    margin-left: 10px;
  }
使用include调用
  div {
    @include left;
  }

5 外部调用
 @import "path/filename.scss";

时间: 2024-10-12 13:19:45

sass折腾的相关文章

Atom编辑器折腾记_(10)CSScomb增强版[CSS/LESS/SASS]

何为CSScomb 官方网站只有一句描述: Makes your code beautiful(让你的代码更漂亮) 通俗点讲: CSScomb是用来排版CSS代码的-可以说是格式化插件,依赖nodejs 获取CSScomb–这不是今天的话题 官方网站: CSScomb 支持许多编辑器,比如Sublime/Atom/brackets等 第三方CSScomb-这才是今天的话题 昨天写了篇CSS3的文章-发现代码有点混乱..人力排版有点--.所以跑去atom插件库寻找csscomb Atom -> s

sass重构响应式unofficial‘s博客轻松适应移动端

前言: 刚刚玩博客园几天时间,发现挺不错的,对于我这个懒人又是一个爱折腾的人来说挺不错的,对于上班玩电脑,下班玩手机的用户来说,博客园中我的博客有一点给我的感觉不是很友好,电脑端看起来很美观的一个页面,移动端竟然也是原模原样的“美观”,由于工作主要是从事移动端开发,看着博客可以禁用模板样式,于是乎就决定把博客样式重构一下,分享是一种美德,不喜勿喷.本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 准备工作: 编辑工具

如何为WebStorm设置SASS的File Watchers?

Webstorm是一个很牛叉的IDE,现在工作每天都是用它了. 最近开始用SASS,LESS等来写CSS,而在Webstorm中,它自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等. LESS的实时编译很简单,在node平台安装一下即可. 而在折腾SASS在Webstorm上的实时编译时,花了我一点时间.因为按照网上的教程设置都不成功,最后自己把设置改来改去终于折腾好了. 下面就是在WebStorm设置SASS的File Watchers的步骤: 1. 安装Ru

使用 sass/scss 编写CSS 快速上手

div#cpmenu {height:200px;float:left;} div#cpcontent {height:200px;width:150px;float:left;} 文章作者:松阳 原文链接:http://blog.csdn.net/fansongy/article/details/44964187 Why Scss CSS不是一种编程语言,它只是个配置文件,并没有生命.但我等大程序 怎么能容忍自己写出来的东西不能动态变化,不能封装继承,不能xxoo呢,于是就有了css预处理的概

webpack4打包失败提示node sass找不到你当前环境绑定的解决方法

前言 最近使用webpack4打包出现了下图报错,提示模块构建失败,Node Sass找不到你当前环境的绑定.   起初我怀疑是node版本较高,导致node sass不兼容而报错.后来发现不是这个原因,谷歌折腾了很久,终于被我试出了解决方法      解决方法 重新安装一次node-sass  npm install node-sass --save-dev(-D等价于--save-dev) 原文地址:https://www.cnblogs.com/tu-0718/p/12193539.htm

一处折腾笔记:Android内嵌html5加入原生微信分享的解决的方法

有一段时间没有瞎折腾了. 这周一刚上班萌主过来反映说:微信里面打开聚客宝.分享功能是能够的(这里是用微信自身的js-sdk实现的).可是在android应用里面打开点击就没反应了:接下来狡猾的丁丁在产品群里AT我说:偶们的产品设计不是一直都被技术给反压制住么?真是气死,呵呵.自己刚好有空又有兴趣,于是研究了下.没曾想竟也研究出来了.事后我对整个操作过程整理了下,方便他人也提升自己. 废话少扯.以下上干货. 我的思路是:在点击h5上的分享图标时.触发js事件,在这里面能够对当前设备的操作系统和浏览

gulp教程(sass,livereload,md5,css压缩,js压缩,img的base64)

环境 node -v  v6.10.3 npm -v  3.10.10 package.json如下: { "name": "zhcsdata", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": &

LSEE和SASS的区别

/Less中的注释,但这种不会被编译/* * 这也是Less中的注释,但是会被编译 *  * [Less中的变量] *  * 1.声明变量:@变量名:变量值: *   使用变量:@变量名 *  *  >>>Less中变量的类型: *  ①数字类         ①10px   ②字符串:无引号字符串 red        有引号字符串   "haha" *  ②颜色类red  #000000   rgb()    ③值列表类型:用逗号或空格分割     10px so

sass语法基础知识

文件后缀名 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.而本教程中所说的所有sass文件都指后缀名为scss的文件.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. //文件后缀名为sass的语法 body background: #eee font-size:12px p background: #0982c1 //文件后缀名为scss的语法 b