[Sass] 既存の CSS ファイルを SCSS ファイルへ変換する

既に CSS で書かれているファイルを SCSS 形式へ変換する方法のメモです。

ターミナルで変換する

ターミナルを開き以下のように入力し実行します。

sass-convert --to (scss 変換するcssファイルがあるフォルダのパス)/style.css (scssファイルを作成するフォルダのパス)/style.scss

例)ホームディレクトリにある sites というフォルダの css フォルダ内の css ファイルを scss 形式へ変換し sites フォルダ内に作っておいた scss フォルダへ保存する場合

ターミナルへ以下のようにコマンドを打ち込みます。

sass-convert --to scss /Users/ユーザ名/Sites/css/style.css /Users/ユーザ名/Sites/scss/scss.css

これでネスト化された scss ファイルが scss フォルダへ作られます。

scss ファイルがscss フォルダへ作られた

cssファイルの中身がネスト化されている

Webツールを使用してオンラインで変換する

css 形式を scss 又は sass 形式へ変換してくれるサイトもありました。

css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

上記のサイトへ行き、元の css ファイルの中身をペーストし、「Convert SCSS」ボタンをクリックすると、ネスト化したものを表示してくれるのでまたコピーして scss ファイルへペーストします。

css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル 素材 コンテンツ Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ