sublime を直接使用して stylus_html/css_WEB-ITnose をコンパイルする

stylus の概要

Stylus は、2010 年に Node.js コミュニティで作成された CSS 前処理フレームワークで、主に Node プロジェクトに CSS 前処理サポートを提供するために使用されます。 Stylus は、堅牢で動的、表現力豊かな CSS を作成するための新しい言語です。比較的新しいものですが、本質的にやっていることは SASS/LESS などと似ており、学ぶべきことはたくさんあるはずなので、CSS コードをスクリプトのように記述し、ファイル拡張子は .styl です。

ドキュメントリファレンス

公式スタイラスドキュメント

Zhang Xinxu による中国語翻訳

基本的なスタイラス アプリケーション

body  color white==>body {  color: #fff;}textarea, input  border 1px solid #eee==>textarea,input {  border: 1px solid #eee;}

一見すると、奇妙な、コロン、中括弧、セミコロンはすべて消えます。これはスタイラスの魔法です。慣れていない場合は、Stylus は標準の CSS 構文も受け入れ、古い Sass 構文ルールのようにインデント制御を使用することもできます。

body{    color white}

または

body{    color:white;}

上記両方のコンパイル結果は

body{    color:white;}

stylus では、sass、less などの Mixins、Functions なども使用できます。 .

たとえば、mixin

support-for-ie ?= trueopacity(n)  opacity n  if support-for-ie    filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')    #logo:hover    opacity 0.5

レンダリング結果は次のようになります。

#logo:hover {      opacity: 0.5;      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);}

ここでは、その機能を 1 つずつ紹介しません。上記の公式ドキュメントを参照

CSS のコンパイルと生成

ここでは主に、Sublime プラグインを使用して生成する方法について説明します。 もちろん、コマンドラインもあります。 grunt やその他のメソッドについては、この記事では説明しません。詳しく知りたい場合は、「スタイラスの使用開始」を参照するか、他の例を参照してください。コンソールを起動して「install package」と入力し、スタイラスと入力して Enter を押してインストールします。インストールが成功すると、パッケージ設定に青色の背景バーが表示されます。

青色の背景バーを展開し、設定で設定します。 -user

設定が完了したら、.styl ファイルを作成し、編集して保存すると、出力パスに表示されます。 コンパイルされた CSS ファイルはここにあります

{    "envPATH": "",  //环境的路径     "binDir": "",   //项目路径    "compileOnSave": true,  //是否编辑保存    "compileDir": true,   //编译到指定目录    "compress": true,  //是否压缩    "compilePaths": {"": ""}  //输出路径}

結論

1. CSS プリプロセッサ技術は現在非常に成熟しており、Sass、Less CSS、Stylus などの多くの前処理フレームワークがあります。Postcss、どれを選択するかは完全に個人の好みによって決まります。

2. インターネット上にはスタイラスに関するチュートリアルがたくさんありますが、エディタ プラグインを直接使用してコンパイルを処理することについては言及されていません。少なくとも私が以前に行った関連性のあるものは見つかりませんでした。私の検索は十分に包括的ではありませんでした。

3. 記事に何か間違っている場合は、時間内に修正するというメッセージを残すか、自分の意見には常に限界があるというメッセージを残すか、フロントエンド コミュニケーション QQ グループに参加してください: 519875573議論のために。