ウェブパ[web制作・ホームページ制作]

Sassのジェネレーター|ウェブパは神戸・大阪をはじめ全国対応のWebサイト(ホームページ)制作パックプランです。

電話番号 078-333-9333

に関する画像

線画像
トップ > インフォメーション > BLOG > Sassのジェネレーター

に関するタイトル画像

線画像

2017.07.06

BLOG

Sassのジェネレーター

この記事をシェアする

制作をしていると、「もっと楽にできる方法ってないのか・・・」と思うことが多くあります。例えば、マウスをホバーした時にふわっと背景と文字色を変更するアニメーションの登録や、矢印のアイコン作成など・・・そういったものを楽にできるツールを探してみても思うように行かないことってたくさんあるわけです。

今回は、そういったことを解消しようと「ジェネレーターっぽいもの」を作成したのでご紹介します。

 

 

前置き

この利用には下記のファイルが必要になるので「利用したい」という場合は下記のサイトからデータを落としていただく必要があります。

 

アニメーション用のSass

これは、animate.cssをsass化したものです。下記のURLよりダウンロードすることが可能です。

https://github.com/afiru/SampleTheme/blob/master/scss/_animate.scss

参考元:https://daneden.github.io/animate.css/

 

矢印アイコン用のSass

これは、矢印アイコンを作成できるSassファイルです。下記のURLコードを落とすことができます。

参考元:http://www.pressmantech.com/tech/design/2738

 

文字ファイルなどのSass

これは、文字などを設定するファイルです。

https://github.com/afiru/SampleTheme/blob/master/scss/_mixin.scss

また、これについてはneatとbourbonというものが必要になってくるのでダウンロードしていただければと思います。

 

 

使い方(基本)

まず、下記のURLにアクセスしてください。

https://web-pack.jp/sass_generator/px.vw/

各項目について数値や文字を入力することで、それに応じたものが出てきます。

 

文字サイズを可変式にする

画面幅とデザイン上でのフォントサイズを入力することで、画面幅に応じてフォントサイズを変更できる用になっています。

それぞれ@include gosick(PC時のフォントサイズ,タブレット時のフォントサイズ,スマホ時のフォントサイズ)となっています。そのまま、Sassファイルに貼り付けていただければ使用できるのではないかと思っています。

 

画面の基準幅を元に、その画像が横幅◯%かを求める

画面サイズに応じて可変する画像ファイルの横幅設定を行います。これについては、タブレット時とスマホ時でそれぞれ対応していただければと思います。

→それぞれに応じて画像を作る必要ありますが、その中でも可変するようになるかと思います。

 

ホバー時に色を変更する設定

これは、ホバー時にリンクボタンをふわっと変更したりするときに使用します。それぞれの色を入力すると、文字サイズと同様に該当のコードが記載されるようになるかと思います。

 

矢印アイコン設定

矢印のアイコンについて、それぞれの色を入力することでその設定ができるように作りました。サンプルとしてダミーを展示していますので気に入ったもののコードを使用していただければと思います。

 

今後もこうしたジェネレーターなども開発していこうと思いますので、ぜひご活用ください。

edited by:afiru

トップに戻る