前端工程师必备的PS切图技能

PS 切图技巧(使用的PHOTOSHOP版本为PHOTOSHOP CC 2016)

  1. 新建文件的时候,可以把设定的参数存储为预设。

  2. 用快捷键[ V ]调用移动工具,注意取消自动选择,并设置为图层,用[ CTRL + 左键 ]快速选择图层。

  3. 打开视图 - 显示 - 智能参考线,打开视图 - 标尺。

  4. 右边只保留图层、历史记录、信息、字符 这四个。

TypeScript入门

TypeScript入门

这是学AngularJS 2 所需要学的知识。

  1. 声明字符串的时候,用[ `` ](键盘上1左边那个键)来括住字符串,可以在字符串换行,TS会转为[ \n ]。

  2. 在[ `` ]中可以写变量和函数的调用。

    1
    console.log(`hello ${var} ${function()}`)
  3. 使用[ `` ]调用函数的时候,可以自动拆分字符串。

    1
    function test(a,b,c){} test`hello ${ee} is ${ff}`
  4. 声明变量后冒号填写变量类型,之后赋值的时候会检查类型。

    1
    var myname: string = 'John'; /* number, boolean */

Sass进阶学习篇

Sass进阶学习篇

这篇学习笔记是Sass入门学习篇的后续学习。

  1. 判断语句[ @if ],可以搭配[ @else if ]和[ @else ]使用,判断true或false。

    1
    @if $boolean { ... } @else { ... }
  2. for循环,其中[ through ]可以更换为[ to ],用[ to ]的时候不包含[ ]。

    1
    @for $i from through { ..#{$i}.. }
  3. while循环,直到while后面的表达式的值为false的时候停止循环。

    1
    @while $types > 0 { ... }

Sass入门学习篇

学习Sass的起因是Ionic2框架中使用到了这个css技术,之前有学过LESS,学Sass还是比较容易的。

  1. 用’$’符号代表变量。

    1
    $color: red;
  2. 变量可以用在css属性上面。

    1
    $side: left; .div{ margin-#{$side}:0px; }
  3. sass文件在CLI下编译,加上–watch的话会监视文件的变化。

    1
    sass --watch <源文件文件路径>/style.scss:<输出路径>/style.css
,