CSS进阶之SASS入门指南         随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说,上手SASS. 一.安装与配置 安装Ruby 由于sass是紧密依赖于ruby语言实现在服务器端编译过程的,所以必须先安装好ruby.对于windows用户来说,需要手动下载安装[官网:https://www.ruby-lang.org/en/downloads/] 安装SASS 点击运行ruby…

1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass-loader --save-dev 2.配置 { test: /\.scss/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }] } 3.新建一个sass文件,编写div 4…

CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于2007年,是最早也是最成熟的一款CSS预处理器语言,它可以使用变量.嵌套.混入.继承,运算,函数等功能,使得CSS的开发,变得简单清晰可维护,同时也大大节省了设计者的时间,提高了效率.Sass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为它不是标准的CSS格式…

转自:http://www.imooc.com/article/1413 css预处理器已经算不上一个新鲜的词了,当前比较有代表性的css预处理器有sass.less.stylus.关于三者选择问题一直都是比较受争议的话题,这里就不在讨论了,适合的就是最好的.这篇文章主要会介绍一些sass的常见用法,当然很多理论都是相通的. 在介绍sass前,我们先得明确几点: Sass并不是css的替代品,它只是让css变得更加高效.可维护 永远不要去修改生成后的css 部署到线上的是生成的css文件,不是s…

本文将介绍Sass的一些基本概念,比如说“变量”.“混合参数”.“嵌套”和“选择器继承”等.著作权归作者所有. 什么是Sass? Sass是一门非常优秀的CSS预处语言,他是由Hampton Catlin创立的.它可以减化CSS的工作流,使开发者更加容易开发,维护CSS样式. 例如,你是否在特定的样式表中查找和替换一个十六进制的颜色而烦恼?或者你正在寻找一个计算器为多栏布局的宽度计算而头痛?(不用担心,Sass能帮你解决这样的烦恼). Sass和CSS非常相似,但是在Sass中是没有花括号({}…

1.安装sass打包的loader 这里需要 在项目目录下用npm安装两个包.node-sass和sass-loader,(也可以使用cnpm安装) 因为sass-loader依赖于node-sass,所以需要先安装node-sass 1.1 node-sass npm install --save-dev node-sass 1.2 sass-loader npm install --save-dev sass-loader 注意:在用npm安装时,这个loader很容易安装失败,最好使用cn…

在平时的项目开发中,我们会引入一些框架,比如:Bootstrap,但是在项目中通常我们只使用它的一小部分,还有部分是冗余的.更有甚有时候需求更改,带来DOM结构的更改,这时候我们可能无暇关注CSS样式,会造成很多冗余的CSS.我们得想办法消除冗余的CSS,如果靠人工去剔除,吃力又容易出错,因此,此节我们来学习一下用webpack如何消除未使用的CSS. PurifyCSS 使用PurifyCSS可以大大减少CSS冗余,消除框架中未使用的CSS,初步达到按需引入的效果. 1.如何在webpack中…

为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader autoprefixer --save-dev 2.在根目录新建一个postcss.config.js文件 module.exports = { plugins: [ require('autoprefixer') ] } 这就是对postCSS一个简单的配置,引入了autoprefixer插件.让pos…

1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loader --save-dev 2.在module中配置 { test: /\.less$/, use: [{ loader: "style-loader" }, { loader: "css-loader" , { loader: "less-loader&q…

使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板,所以我们需要引入node的glob对象使用.在webpack.config.js文件头部引入glob.引入purifycss-webpack 3.配置 new PruifyCSSPlugin({ paths:glob.sync(path.join(__dirname,'src/*.html'))/…

mxGraph教程-开发入门指南 概述 mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图.图表.网络图和普通图形的Web应用程序.mxgraph下载包中包括用javascript写的前端程序,也包括多个和后端程序(java/C#等)集成的例子.以下是mxgraph应用的几个例子.(你可以到www.longboo.com的主页下载mxgraph和更多的mxgraph实例) 电力系统案例 工作流设计器 化工系统案例 mxGraph客户端是一个图形组件,并提供…

CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没有完善的编码规范,编写的 CSS 代码会非常冗余且难以维护. 为了解决上述问题,出现了很多 CSS 预编译语言,CSS 预编译语言是基于 CSS 语言的语法扩展,除了能解决上述缺乏语言特性带来的问题之外,还支持嵌套书写,减少重复输入父级选择器(可理解为 CSS 中的继承机制),提高了代码的可读性和编…

这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元素它们的默认值通常是 block 或 inline .一个 block 元素通常被叫做块级元素.一个 inline 元素通常被叫做行内元素. block div 是一个标准的块级元素.一个块级元素会新开始一行并且尽可能撑满容器.其他常用的块级元素包括 p . form 和HTML5中的新元素: header…

HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能. HTML5 Plus规范 通过HTML5开发移动App时,会发现HTML5很多能力不具备.为弥补HTML5能力的不足,在W3C中国的指导下成立了www.html5plus.org组织,推出HTML5+规范.HTML5+规范是一个开放规范,允许三方浏览器厂商或其他…

<Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成压缩工作. 所有的 gulp 代码编写都可以看做是将规律转化为代码的过程. 规律 找到 js/ 目录下的所有 js 文件,压缩它们,将压缩后的文件存放在 dist/js/ 目录下. gulp 代码 你可以 下载所有示例代码 或 在线查看代码 建议:你可…

ylbtech-DCloud-HTML5+:5+ App开发入门指南 1.返回顶部 1. 5+ App开发入门指南 App App入门 HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能. HTML5 Plus规范 通过HTML5开发移动App时,会发现HTML5很多能力不具备.为弥补HTML5能力的不足,在W3C…

编程入门指南 v1.4 Badger · 8 个月前 作者:@萧井陌, @Badger 自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0 CoCode:一个让大家学习.成长.相聚并获得乐趣的技术社区 编程入门指南 一群(243545867):编程入门指南 二群(438379133) 答疑邮箱: xiao.gua@outlook.com (@萧井陌) v2.0 准备重构 2015年06月07日 v1.4 更新 2015年04月16日 v1.3 更新…

2019年12月5日初稿,目前webpack已经更新到v4.41.2,本文正是基于该版本,在windows8.1操作系统下进行的demo编译,适用于想入门webpack的前端开发人员. webpack官方使用指南(参考1):https://www.webpackjs.com/guides/getting-started/ 本文参考(参考2):https://segmentfault.com/a/1190000006178770?utm_source=tag-newest#comment-area…

参考资料: SASS 用法指南 SASS 语法 Sass Basics SASS_REFERENCE sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号:另一种就是我们这里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号. 关于 sass 的编译,采用 gulp + gulp-sass + browser-sync 的组合,详见 Gulp 常用插件 一文中「热重载」一节. 基本用法 变量 SASS 允许使用变量,所有的变量以 $ 开头,用过…

PHP程序员进阶学习书籍参考指南 @heiyeluren lastmodify: 2016/2/18     [初阶](基础知识及入门)   01. <PHP与MySQL程序设计(第4版)>  http://item.jd.com/10701892.html 02. <深入浅出MySQL 数据库开发 优化与管理维护 第2版> http://item.jd.com/11381295.html  *浅读 03. <实战Nginx:取代Apache的高性能Web服务器> ht…

本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p>You wrote: {{ name }}</p> </div> 运行 AngularJS基础 我的第一个AngularJS指令 我的第一个A…

使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML imports功能,以支持在HTML中包含其它的HTML文件. <link rel="import" href="/path/navigation.html"> 在服务端包含文件 大部分的web服务器都支持服务端包含文件(Server Side Includes).通过…

thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table.reference>thead>tr>td, table.reference>tbody>tr>td, table.reference>tfoot>tr>td { padding: 8px; line-height: 1.42857143; vertic…

Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式.实际的DOM操作和输出格式被抽象的方式到指令(Directives)和过滤器(Filters) 在哲学领域内,尽量让MVVM数据绑定API尽可能简单.模块化和可组合性也是重要的设计考虑.vue不是一个全面的框架,它被设计成简单的和灵活的.…

我们可以将之前章节中的代码用来从数据库中读取数据. 通过PHP Server从MySQL数据库中获取数据 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td&…

ng-repeat指令非常适合用来显示表格. 在表格中显示数据 在AngularJS中显示表格非常容易: <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td&…

AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS application. ng-init指令用来初始化application数据. ng-model指令用来将HTML控件(如input,select,textarea等)的值绑定到application数据. <div ng-app="" ng-init="firstName='John…

AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 本指南旨在帮助你尽可能快速而有效地学习AngularJS.通过该指南你会学习到AngularJS的一些基本特性,例如指令.表达式.过滤器.模块和控制器等.以及其它所有你需要知道的有关AngularJS的东西,如事件.DOM节点.表单.用户输入.数据验证.Http对象等. AngularJS快速入门指…

作者: 阮一峰  日期: 2012年6月19日  原文地址:http://www.ruanyifeng.com/blog/2012/06/sass.html 艹,没想到sass 2012年就有了.现在2016年,过去4年了,才知道.太落伍了.============================================学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,CSS是一件很麻…

web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口徘徊.不过还好,相比之前一直苦逼不知道如何下手,没人指点的时候,好多了.现在相对来说,知道怎么走了.现在总结一下前端的基础知识,顺便推荐几本书.因为每个知识点都可以拉开架势写几本书都不一定写的全,所以我就不去详细展开了,就大概讲一下前端的一点概念,顺便介绍下前端的基础知识等.如果能给你带来点知识涵养…