css」タグアーカイブ

sassのfunctionで戻り値に()かっこを使った場合に、スペースが入ってしまうのを解消するのは + (コンパイラによっては)

sassのfunctionで戻り値に()かっこを使った場合に、スペースが入ってしまうのを解消するのは + (コンパイラによっては)

以下の用な関数を作ってコンパイルした時に余分なスペースが入ってun validなCSSになってしまってましたが、戻り値を+で連結するとスペースが入らずvalidになりました。(※gulp-sassを使っての環境でのこと)

(以下 sass記法です)

[関数]

@function px2vw($num)
    @return ($num/1024*100)vw

[使い方]

div
    width : px2vw(500)

[コンパイル結果:期待値]

div{
    width : 48.828125vw
}

[コンパイル結果:実際]

div{
    width : 48.828125 vw
}

orz.. vwの前にスペースが入ってエラー。。

[解決方法]

@function px2vw($num)
    @return ($num/1024*100)vw

あと以前はPHPStorm上で、Compassを使ってコンパイルしていた場合は出ませんでした。

gulpのsass,scssのコンパイルの高速化(LibSassをつかって)

gulpのsass,scssのコンパイルの高速化(LibSassをつかって)

これまではcompass+sassをgulpのタスクランナーで利用していてコンパイルが重くなってきたのでより高速で快適な環境にするため、良いという噂のLibsassを使った環境に変更してみました。

CompassをLibsassとAutoprefixerの環境に変更

基本的なコンパイルは Libsassを使えるgulpのライブラリ’gulp-sass’をつかいます。
またベンダープリフィックスの自動付与もgulpのライブラリ’gulp-autoprefixer’を使います。
合わせてインストール。

$ npm install gulp-sass --save-dev
$ npm install --save-dev gulp-autoprefixer

gulpfile.js

ディレクトリ構成は以下を想定

webroot/
    css/コンパイルされたcss
    scss/コンパイル前のcscc

gulpfile.js 最少構成

var gulp = require( 'gulp' ),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('scss',function(){
  gulp.src('scss/**/*.scss')
    .pipe(
      sass({
        outputStyle: 'compressed'
      })
    .pipe(autoprefixer({
          browsers: ['last 2 versions'],
          cascade: false
    }))
    .pipe(gulp.dest('css'));
});
gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', ['scss']);
});

ターミナルからgulpを実行してwatchして完了だいぶ高速になり、快適になりました。

$ gulp watch
[12:54:32] Using gulpfile your/project/path/gulpfile.js
[12:54:32] Starting 'watch'...
[12:54:32] Finished 'watch' after 11 ms

以下のようなスピード感。(msとか、μsとか1秒以内)

参考サイト

gulp-sass
gulp-autoprefixer
「compass」をやめて、爆速「Libsass」に変えたら作業が超捗った件。

Alfredを使った計算がCSSの記述に便利。【web制作効率化】

Alfredを使った計算がCSSの記述に便利。

最近ほとんどsass(sass記法)で書くことがおおくなったのですが。
たまに変更や、レギュレーション、効率etcで生CSSを書くこともしばしば

要素のサイズ及び、文字のサイズetcは、ほぼvwを使って書くのですが。その時のTips

px > vwへの計算を簡単にシームレスに行う。

いろいろ何かツールとかも考えたのですが、Alfredの計算機能が便利。

https://www.alfredapp.com/

基本ランチャーのアプリなのですが、計算式を入れると結果を表示しれくれます。

title

title

これを利用します。まずはデザインソフトで矩形などのサイズを確認します。(私は目視で直接入力しますがコピペでも良いかも)

title

title

そこに 617に次いで “/640*100”と入力すると結果が表示されます。のでそこでそのまま[エンター]をクリック。→これでクリップボードにコピーされます。
(※640はカンバスのサイズ)

title

title

あとはCSSのエディタにアプリを切り替えて(Cmd+Tabなどで)貼り付けて、Cmd+Vなどで貼り付けて、’vw’と打てば完了です。

ポイントしては、

デザインソフトでサイズを測る箇所以外がすべてキーボードで完結するのでタイプが早く慣れなる分だけかなり効率化できてきていると感じています。

数字キーは簡単なテンキーで入力したくなると思いますが、将来的なことを見据えるとホームポジションでブランドタッチができるようにテンキーでなく通常のキーから入力するほうが他にも応用が効くのでおすすめです。

CSSでのフォント指定

CSSでのフォント指定

いかのような基準で作っています。

通常のなんでもないサイトの場合

  • ゴシック : win メイリオ、mac : ヒラギノ
font-family : "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif
  • 明朝 : win HG明朝 or MSP明朝、Mac : ヒラギノ明朝
font-family : "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif

すっきりしたデザインの場合

  • ゴシック : mac,winとも 游ゴシック体
font-family : "游ゴシック体", YuGothic, "游ゴシック Medium", "YuGothic M", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
font-weight : normal;

(POINT : font-weightを明示)

  • 明朝 : mac,winとも 游ゴシック体
font-family : "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" ,"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
font-weight : normal;

※IEのバグに注意

游明朝、游ゴシックでIEで文字の上下の揃えがずれるバグがります。

どっちが読みやすいとかも考えると。

特に意図しない普通のサイトの場合ユーザーの読み慣れているフォントが読みやすいことも考えられたりするかもなども気になる。

Sass記法,FlexBox,Compassでよく使う書き方メモ

Sass記法,FlexBox,Compassでよく使う書き方メモ

世の中SCSS記法がありふれてるのですが、小規模一人Web開発がおいので、より効率的なSASS記法+Compassをつかっています。あまりサンプルも落ちていなくよく忘れがちなので記法をメモ。

CSS(SASS記法)

@import compass
.row
    +flex-wrap(wrap)
    +flexbox((display: box,box-orient: horizontal), $version: 1)
    +flexbox((display: flexbox,flex-direction: row), $version: 2)
    +flexbox((display: flex,flex-direction: row))
.row.row-nowrap
    +flex-wrap(nowrap)

HTML

<!-- 折り返し有り -->
<ul class="row">
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
</ul>
<!-- 折り返しなし -->
<ul class="row row-nowrap">
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
</ul>