質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Stylus

Stylusとは、node製のCSSメタ言語。同じCSSメタ言語のSassとLessの特長を持ち併せており、シンプルな方法でCSSが記述でき、高い柔軟性があることがメリットです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Less

LessはCSSをシンプルかつ効率よく書くための、 CSSメタ言語の1つです。 lessで変数宣言を行う場合、@から宣言します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1355閲覧

生のCSSしかいじったことがない人がStylusを学ぶ学習コスト・リスクについて知りたい。

退会済みユーザー

退会済みユーザー

総合スコア0

Stylus

Stylusとは、node製のCSSメタ言語。同じCSSメタ言語のSassとLessの特長を持ち併せており、シンプルな方法でCSSが記述でき、高い柔軟性があることがメリットです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Less

LessはCSSをシンプルかつ効率よく書くための、 CSSメタ言語の1つです。 lessで変数宣言を行う場合、@から宣言します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2020/09/14 04:22

編集2020/09/14 09:23

初めまして。mitonと申します。
知りたいことはタイトル通りです。
以下、学習希望者のスペックと知りたいポイントをまとめます。

学習希望者スペック

・ WEB制作の知識はHTMLとCSSのみ。SassやLessは学んだことがなく、導入方法を検索で調べた程度の知識。
・ JavaScriptの知識についてはライブラリを元に少し調整する程度。1から構築していけるだけの知識はない。
・ Stylusを学習したいと思ったのは ① Sass構文とLess構文のどちらにも対応している汎用性 ② 生のcssの形での入力も出来そう という2点の柔軟な印象から。
※ ②については生のcssしかいじれない方にデータを渡す可能性を考慮し、必要と感じた。

知りたいポイント

・ 生のCSSしか知らない状態のまま、Stulusを学ぶのはそもそも無謀だろうか?
┗ SassやLessを学んでからの方が理解しやすそうな印象を受けたが、出来ることなら学習コストは抑えたい。
・ Stylus学ぶ~業務に取り入れる中で発生した問題やリスクはあるか?
・ Stylusを学ぶ上で参考・ヒントになるサイトや書籍等は何か?

Sassと比べ検索で拾える情報が少ないことから、初学者向けのものではないのでは?と不安を感じ、質問いたしました。
Stylusを業務に取り入れた方の感想等を拝見し、今後も移りゆくWEB制作の現場でも柔軟に対応していけるのでは、と魅力を感じたのですが…

多くの方からの様々なご意見をお待ちしております。
(誹謗・中傷除く)

追記事項

ここまでコメント下さった皆様、ありがとうございます。少しづつ返答させて頂きます。
以下、編集・追記依頼への回答となります。

■ 私自身の環境と懸念しているリスクについて

私自身は現在、少人数体制の制作会社でWEBデザイナーとして働いております。
会社での業務において、CSSプリプロセッサの導入はこれまでしてきませんでした。

リスクの可能性として考えていたのは、このような記号の省略等をする記法で制作したデータを
生のCSSしかいじったことがない環境の人たちが修正・調整しようとする際、混乱を招くことはないのだろうか、という点でした。

一個人として学ぶ上では何ら問題がない、むしろプラスに繋がっていく印象を頂いたコメントからも感じています。
個人的には、Sassの方が参考となる情報の量からも学びやすそうに感じたのですが、
上記の懸念を考慮した時、Stylusの方が記法の癖が少なく、現在の周囲の環境にも柔軟に合わせやすいのかな、と感じました。

また、SassまたはLessを学習した上でStylusを取り入れる、というのが一般的な学習ステップと感じたのですが、
SassやLessを学ばず最初からダイレクトにStylusを学ぶことで、学習コストを抑えることに繋がらないだろうか?と考え、
「出来ることなら学習コストは抑えたい」の一文を記述しました。

なお、状況説明について事細かにする事は少し憚られたため、
以上がご説明できる範囲、とさせて頂きます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hentaiman

2020/09/14 04:46

「miton score 0」さん自身は現在そういう職種についてるんですか?ついているなら周りの人材や環境を加味しないとデメリットは分かりません。 仮にそうでなくてただ学習する身であるならリスクを考える理由が全く分かりません。どういう点でのリスクを想定されているのでしょうか?
退会済みユーザー

退会済みユーザー

2020/09/14 05:06

hentaimanさん 追記・修正のご依頼、痛み入ります。 質問を修正し、現在私の置かれている環境についてもう少し詳しく述べたいと思います。 少し席を外しますので質問の更新は後ほどとなりますが、hentaimanさんからも改めてご意見頂けましたら嬉しく思います。
hentaiman

2020/09/14 05:13

もちろんです。修正依頼をする時は基本的に回答をするつもりで書いてます。修正依頼の目的が通じず期待した修正がなされない時はスルーする事もありますが。 特にリスクに言及している理由は、単純に今まさにその手の仕事をしている訳ではないのならリスク(というかデメリット)は学習に時間がかかる事ぐらいしかなく、目的が新技術の習得である以上は当然の事でありデメリットとは言えないからです。 ですので、上記に該当する場合は回答をしないかもしれません。
kai0310

2020/09/14 05:57

何を基準に学習コストを抑えたいと言っているのか分かりませんが、そこから無駄になるかは結局自身の問題かと。
hentaiman

2020/09/14 11:44

> 生のCSSしかいじったことがない環境の人たちが修正・調整しようとする際、混乱を招くことはないのだろうか、という点でした。 追記見ましたが、それらの環境の人達の学習期間は無いのか?教えたとして学習意欲はある人達なのか?自分で調べる能力はあるのか?仮にstyusを布教した場合に、それらの人達に疑問点を聞かれた時に質問者ひとりで対応出来るのか? など、環境に依存するので回答は出来ません。 まあ検索し辛いstylusを広めるよりはsassのが安パイですねってことぐらいですかね。このteratail内だけで検索してもsassなら色々情報出てくるだろうしね。
退会済みユーザー

退会済みユーザー

2020/09/15 01:11

hentaiman さん 追記お目通しいただき、ありがとうございます。 ご依頼くださった事に、ほとんどお答えできず申し訳なかったです; 具体的にご提示頂いた疑問点を見て感じましたが、”チーム全員が”知り学ぶ必要があるものなのかも分かっていない状況だったため、自分個人に出来る範囲で学んでから改めて考えようと思います。 やはり、StylusよりもSassの方が情報は多いですよね。 こちらのサイトも使い、少しずつ調べていこうと思います。 こちらでのご返信、ありがとうございました。
guest

回答3

0

ベストアンサー

普段、Sassを使っていますが、結局のところ最終的にコンパイルしてcssとして出力しますので

※ ②については生のcssしかいじれない方にデータを渡す可能性を考慮し、必要と感じた。

というのはコンパイルしたものを配布すればいいのではと思います。

出来ることなら学習コストは抑えたい。

ということであれば、そもそも検索で拾える情報が少ないものを選ぶことこそが学習コストを高くすると思います。

慣れないうちは検索することが多いと思うので検索時間はより短くなるうように情報が多いものを選ぶのがいいと思います。

今後も移りゆくWEB制作の現場でも柔軟に対応していけるのでは、と魅力を感じたのですが…

Stylusが主流になるかどうかわからない段階では、無難なものを学習することがよいと思います。
そのあとで自分にあったものを選ぶのが良いのではないでしょうか?
私の経験上、先方からStylusで書いてくれと指定されたことは今までにはないです。
(Sassはあります。)

現場で柔軟に対応するためには様々な知識が必要とされます。
知らないことはその場で調べ、新しい情報を常に意識し取り入れなければなりません。
学習コストで選ぶよりも使っている人の多さや情報の多さで選ぶのがいいと思います。

投稿2020/09/14 05:15

beginner_t

総合スコア716

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/09/14 09:40

beginner_t 様 日ごろ活用されている方からのご意見、大変参考になります。 コンパイルしたものを配布することで、考えていた編集や修正のリスクは抑えられるのですね。 そうですよね…。 いくらStylusが良いものだとしても、特殊な記法を知らない初学者が学ぼうとする上で拾える情報が少ないのは、それだけでリスキーなのですね。 柔軟に対応していくために重視すべき点も、beginner_tさんのコメントを受けてもう一度考えてみよう、と思いました。 丁寧にお答え頂き、ありがとうございました。
beginner_t

2020/09/14 11:50

bootstrapのようなフレームワークでもsassは導入されていますし、その先にはgulpなどの自動タスクなどもあり、色々と覚えることは多いと思います。 それだけ面白いものが待っているとおもえば、学習コストは気にならないと思います。
退会済みユーザー

退会済みユーザー

2020/09/15 01:34

beginner_t 様 >それだけ面白いものが待っているとおもえば、学習コストは気にならないと思います。 業務云々の前に、私個人がSassの存在を知った時「これすごいな!!面白そう!!」とすごく興味をひかれたんだった、と思い出しました。 業務に支障があるかも…という不安で、このワクワク感を埋もれさせていたかもしれません。 とらぬ狸の皮算用は置いておいて、まずは自分がどっぷり体験してみよう、と心持ちが変わってきました。 コメントくださり、ありがとうございました。
beginner_t

2020/09/15 01:58

Sassのすべての機能を一気に取得するというのは難しいので、まずはファイルを作りコンパイルの仕方を調べ、そこから入れ子で書いてみたり「&」を使ってみたり変数を使うくらいまでで慣れてみるといいと思います。それだけでもかなり便利になると思います。それくらいなら1日あれば試せると思います。 それ以上の機能はどこを便利にしたいかや効率化したい部分によって違うので、その時にどういった機能があるのかを詳しく見てはいかがでしょうか。
退会済みユーザー

退会済みユーザー

2020/09/15 02:24

なるほど…具体的に教えて頂き、ありがとうございます。 試したいツールについても調べておいたため、早速触っていこうと思います。 ここまで丁寧に答えてくださり、本当にありがとうございました。
hentaiman

2020/09/15 03:38

自分では特に使う機会ないけど、sass使えるようになったらついでにpugの導入も試みてみるといいかもしれない 強制的に綺麗な構造のhtml(ではないけど)書けるようになりますよ
退会済みユーザー

退会済みユーザー

2020/09/16 03:20

コメントありがとうございます。 pugも気になったため、早速調べてみました。 htmlも短い記法で書けるのは、本当に魅力的ですね。 htmlもcssも書くのは嫌いではないのですが、出来ることが少しずつ増えるにつれ、 比例するように記述量も増えてきたことが導入を検討するきっかけだったので、 「こんなのもあるよ!」と教えて頂けるのは本当に励みになります。 情報寄せて頂き、ありがとうございました。
guest

0

Stylus経験があるわけではないですが、思うところだけ。

結局Webページにはコンパイル後のCSSが適用されるわけですし、CSS知らない状態ならともかく、無謀ということはないのでは。

ただ、

出来ることなら学習コストは抑えたい。

何も基盤がない状態から進んでしまうと逆に学習コストは高くなるのでは。

投稿2020/09/14 04:38

m.ts10806

総合スコア80850

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/09/14 04:59

m.ts10806 様 早速のご意見に嬉しく思います。 先んじて「無謀ということはない」と仰っていただけたことで、不安感が和らぎました。 基盤 = SassやLessの知識、と受け取りますが、それらの知識はStylusを学ぼうとする上で回り道ではなく理解しやすくなる手助けになるのかな、と少し考えました。 ご意見頂き、ありがとうございました。
m.ts10806

2020/09/14 05:21

むしろやってもないことを無謀だというのは時期尚早という話です。
m.ts10806

2020/09/14 05:22

こういう質問してる暇があるならちょっとでもやってみたほうがいいと個人的には思います。
退会済みユーザー

退会済みユーザー

2020/09/14 10:00

うーん…本当に、その通りですね; 自分の中では【業務に関すること=私以外の周囲にも影響を及ぼす可能性があること】として捉えていたので、この質問は「導入することで周囲に支障はないだろうか」「素人が勇み足で挑戦する前に、経験を積まれてきた方の意見が聞きたい」との思いからさせて頂きました。 やってもないことを悩むくらいなら、まずは挑戦してみたら?というのは、シンプルかつポジティブな考え方ですよね。 緊張はしますが、日ごろから心掛けていけたらいいな、と思いました。 ご返答ありがとうございました。
guest

0

ご多用の中コメントやご回答くださった皆様、ありがとうございました。

頂いたコメントからも、現時点のStylusはやはり(良いものなのかもしれないけど)拾える情報量の少なさから初学者向けでないのだな、と感じました。
また、業務に取り入れるとしたら何か支障が出るんじゃないかな…というのは、そもそも自分がCSSプリプロセッサについてわかっておらず、習得もしない内から悩むのは時期尚早だったな、とも考えを改めました。

コードに関する質問ではありませんし、低評価を多く頂くようだったら即刻削除しようと考えていましたが、投稿後閲覧に来られた方も多くいらっしゃったため、私と同じように今後うっかり思い悩んでしまった方のために、こっそり残しておこうと思います。

ベストアンサーには、今現在Sassを取り入れて活用しておられる方の視点から意見を述べてくださった、beginner_t 様を選びたいと思います。
ありがとうございました。

投稿2020/09/15 02:26

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問