「Sassを使おうとしたけど、設定でつまずいて結局使ってない。「Sassのインストールの際にエラーが出て進めない。「MacでSassを使える様にする為の環境設定の方法を知りたい。」この記事はそんな方へ向けて書いています。CSSをスピーディに効率よく書く為の技「Sass」。使える様になると便利ですが、使える様にする為にはまずSassをCSSにコンパイルできる様にする為の設定が必要です。Sassは便利っていうのはわかったけど、コマンドライン、ターミナルでコマンドを打ち込んで操作する場面が苦手。いうか、そんな場面が必要になってきたら「・・・よし、分からない。」となる方も多いとかもしれません。僕も英語が得意な訳でもないので、いまだにあのターミナルの独特な黒いにコマンドを打ち込むたびに「パソコンが暴走して爆発したらどうしよう。」と思いながら入力する事もあります。新たにMacでSassを使える環境を設定をしようとして、最初のインストール作業でエラーが出て無駄に苦戦しました。解決方法がわかるとすごくあっけなくインストールができました。僕がSassをMacにインストールしようとして遭遇したエラーの詳細な内容と、解決した方法を備忘録として残しておきます。macにSassを設定しようとしたら、エラーが出て進めない。そんな方はぜひ参考にご覧ください。Sassを設定しようとしたら、エラーが出て進めない...。sudoコマンドを使って再びgemのインストールを試みるも、、失敗。調べてみるも原因がイマイチはっきり理解できず、無駄に難航...。英語が分からないので、こんな画面が出てきたら心拍数が上がります。何かしらエラーが出てsassがインストール失敗しているのはなんとなく分かる。構築失敗...?アナタハ、ルビーノ開発環境ヲ別々ニインストールスル必要ガアルカモシレナイ?いやだ、意味がわからない。眠くなってきた...。/usr/local/bin/インストールする場所を変更する事でSassをインストールする事ができました。最近のmacOSではroot権限でも/usrや/binなどのディレクトリにアクセスできないようになっているらしく、素直にコマンドを打ち込んでインストールしようとすると、そのディレクトリにインストールしようとしてしまう事が原因の様です。この辺りはあまり詳しく説明できるほどの知識がないので、あくまでおそらくですが、僕は一応これで解決できました。MacでSassを使える様にするための設定の概要せっかくなので、MacでSassを使えるようにする為の基本的な概要を今一度見直す為に記載しておきます。Sassはどういった仕組みで動くかという事をざっくりいうと、Rubyのgemというライブラリーを使用しており、Sassで書かれたコードを最終的にCSSコードに整形する環境を整える事で使用できる様になります。その事から、Sassを使うためには、Rubygemのインストールが必要です。ちなみに、Sassの書き方や概要についてはコチラの記事でまとめています。https://kutakuta-nikoniko.xyz/2019/11/06/sass/Sassを設定しようとしたら、エラーが出て進めない...。なった状況の詳細や経緯MacにSassの設定をしようとした時に遭遇してしまったエラーの詳細な状況や環境はこんな感じでした。-vのコマンドを実行。一応Macなのでrubyははじめからインストールされているはずですが念の為に確認。バージョン情報が返ってきたので、きちんとインストールはされている様でした。「アナタハ書キ込ム許可を持ッテイナイ」といった内容のエラーが。sudoコマンドを使ってroot権限で命令してないからかな?と、もう一度挑戦。sudoコマンドを使って再びgemのインストールを試みるも、、失敗。sudoでスーパーユーザーの権限でgemのインストールを試みたところ、長々としたエラーコメントが表示。構築失敗...?アナタハ、ルビーノ開発環境ヲ別々ニインストールスル必要ガアルカモシレナイ?いやだ、意味がわからない。眠くなってきた...。調べてみるも原因がイマイチはっきり理解できず、無駄に難航...。ググってみてもいまいち原因がハッキリわかりからず難航しましたが、様々な記事を参考にとりあえずインストール先を変更して命令すると無事にインストールする事ができました。最近のmacOSではroot権限でも/usrや/binなどのディレクトリにアクセスできないようになっているのが原因ぽかったです。/usr/local/bin/上記コマンドをターミナルに入力する事で無事にインストール、MacでSassを使えるようにする事ができました。https://teratail.com/questions/148890https://qiita.com/Poyaaan/items/a7088e05066d02a440dehttps://apple.srad.jp/story/15/09/30/1529213/まとめMacでSassを使えるようにする為の環境設定で無駄につまづきましたが、なんとか使える環境を整える事ができました。別記事でも書いていますが、Sassが使いこなせるようになればCSSコーディングをシンプルで効率的に書ける用になります。「初心者を脱却して、もう少し一歩進んだWebデザイナーになりたい。「毎日作業に追われて睡眠時間が削られている。」そんな駆け出しWebデザイナーの方で、Sassの導入設定でエラーに遭遇して四苦八苦している方は、ぜひこの記事がSass導入のお力添えになればと思います。いう事で、今日も少し眠ります。カエレバ楽天市場で見るAmazonで見るYahooショッピングで見るCSS記述を高速化して時間に激務にゆとりを。Sassの基礎と書き方入門【Webデザイン】うぅ今日も残業...。Webデザインを始めてそんな状況に陥っていませんか?本記事ではWebサイトを装飾するCSSコーディングの効率をグンっと上げる「Sass」について初心者向けに解説しています。Sassって一体何?基礎や基本をざっくり把握したい。そんな方は是非一度ご覧ください。gemスポンサーリンクスポンサーリンク【無料】プログラミングなんて自分にできるの?一番簡単に最短でスキルを身に着ける方法。こがねさん「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしないゾ...。」AIソルトくん最初はプログラミングスクールの力を借りるのも1つの選択肢だよ。僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です。した基礎を身につける事ができれば、あとは独学でも様々な言語に手を広げていく事ができます。今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。ネットは有益な情報もあれば微妙な情報も混在しているので、どうしても回り道になったり独特なやり方が身についてしまったり、といったデメリットもあります。僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。独学で苦戦しているなら、最初はスクールの力を借りるのも1つの選択肢です。「最短でプログラミングスキルを身に付けたい。「間違いのない、しっかりとしたプログラミングの基礎を勉強したい。「一緒に切磋琢磨できるプログラミング仲間が欲しい。「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」そういった方は、実績のあるオンラインスクールを一度無料体験してみることをオススメします。プログラミングのオンラインスクールも探せば色々選択肢があります。その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。無料コースを試してみてやめるもよしですし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみるのもアリです。1つの言語の基礎をしっかり身に着ける事ができれば、様々なプログラミング言語の習得の難易度も一気に下がります。スキルは奪われないし裏切りません。その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。関連記事ライフハックGoogle検索のコツ。便利な全20のテクニックとオプション機能まとめ。最果てデザイナーの今更はじめるライフスタイルデザインデザイン色の組み合わせでお困りなら。配色の効果や相性を判断する為のコツ。最果てデザイナーの今更はじめるライフスタイルデザインデザイン・プログラミングなどjquery(ジェイクエリー)リファレンス。基本的な命令一覧のまとめ。最果てデザイナーの今更はじめるライフスタイルデザインデザイン・プログラミングなど【体験談】2週間で国家試験合格。ITパスポートのオススメ勉強方法。【2018年10月版】アドセンス広告が設定していない場所に出てレイアウトが崩れた場合の対処法。最果てデザイナーの今更はじめるライフスタイルデザインデザイン・プログラミングなどその発想はなかった!3秒でできる、バズるタイトルをつける方法。最果てデザイナーの今更はじめるライフスタイルデザインライフハックやらなきゃ絶対損。最果てデザイナーの今更はじめるライフスタイルデザインCSS記述を高速化して時間に激務にゆとりを。Sassの基礎と書き方入門【...たった5分でHTMLコーディング速度を爆上げ。emmet記法の使い方。何だかんだそれなりに色々できちゃう多機能なデザイナーです。・ネットショップ運営・マーケティング・イラスト・コピーライティングなど音楽やアート、ITや先端技術が好き。クリエイティブで自由に楽しく。デザイン、プログラミング、お小遣い稼ぎ、副業や日々の体験談などの雑記ブログです。/最新の投稿2020年2月2日なんとかなる。【資格】Webクリエイター能力認定試験を受けてみた話【難易度や概要など】2019年12月7日たった5分でHTMLコーディング速度を爆上げ。emmet記法の使い方。2019年11月10日MacでSassがエラーでインストールでできない問題を解決した話【一瞬で解決するかも】2019年11月9日CSS記述を高速化して時間に激務にゆとりを。【体験談】2週間で国家試験合格。ITパスポートのオススメ勉強方法。iパス4.0を合格】やらなきゃ絶対損。規制の前に急げ!めんどくさがり屋でも10分でできた「ふるさと納税」をする方法いらすとやさんの闇深い系おもしろ画像のまとめGoogle検索のコツ。便利な全20のテクニックとオプション機能まとめ。twitterでよく見る強調の囲みのやつ。ギザギサ吹き出しAAを簡単につくる方法。3級を独学で1発合格する方法【2019年7月】アイデアが浮かばない...。そんな時に見直すアイデアの出し方のヒント。アーカイブ2020年2月2019年12月2019年11月2019年10月2019年9月2019年8月2019年7月2019年6月2019年5月2019年4月2019年3月2019年2月2019年1月2018年12月2018年11月2018年10月2018年9月2018年8月スポンサーリンク繋がりやすてく高速、安定のオススメレンタルサーバー。どこを使うか迷っているならXSERVERが絶対オススメです。ドメイン取得価格がたった1円〜。ドメインを取るならお名前.com。me何だかんだそれなりに色々できちゃう多機能なデザイナーです。・ネットショップ運営・マーケティング・イラスト・コピーライティングなど音楽やアート、ITや先端技術が好き。クリエイティブで自由に楽しく。デザイン、プログラミング、お小遣い稼ぎ、副業や日々の体験談などの雑記ブログです。最果てデザイナーの今更はじめるライフスタイルデザイン。