常連

### 概要
windowsからlinuxサーバへのssh接続をTeraTermから、WindowsTerminalに乗り換えました。
しかし、lessでの文字表示が乱れるのでテキストファイル確認時に見落としが起きそうで困っています。
（TeraTermは接続の数だけウィンドウが増えてしまうので、タブやペイン表示ができるWindowsTerminalにしました）


### 状況
Windows10 Pro 1909、Windows Terminal 1.0.1811.0にて、
Windows Terminal上のPowerShellを用いてWindows10標準のsshで以下のようにlinuxサーバに接続し、
```ここに言語を入力
PS C:\Users\XXXX> ssh root@192.168.XXX.XXX
```
lessコマンドでテキストを開きます。
```ここに言語を入力
# less /var/log/XXXX/XXXX.log
```
通常、lessでファイルを開いた直後、画面の最下行にはファイル名が表示され、
その上には開いたファイルの内容が表示されます。

しかし、本来は画面の最下行、1か所に表示されるはずのファイル名が、
ファイルの内容の途中にも重なるように表示されてしまうほか、
ファイルの先頭数行が表示されず、途中から表示されてしまいます。

同じlessコマンドを実行してはlessを終了するという操作を何度か繰り返すと、
異常な表示になったり、正常になったりします。

異常な表示となったときの様子です。
ファイル名/var/log/lipsum.txtが2か所に表示され、
テキストの1行目が表示されていない状態となっています。
![イメージ説明](16f4702c7edb0e2755365482f179af5e.png)


### 比較検証
各ソフト、環境で同一サーバにsshし、同一lessコマンドを試しました。
- WindowsTerminal上のコマンドプロンプトでも同じ現象が起きます
- スッピンのPowerShellでも同じ現象が起きます
- スッピンのコマンドプロンプトでも同じ現象が起きます
- TeraTermでは起きません
- macのiTerm2では起きません
- すべての環境・ソフトで試したわけではありませんが、viでは起きないようです

つまり、WindowsTerminalは関係なく、PowerShellまたはコマンドプロンプトでssh接続したときのlessで起きています。
Windows10のOpenSSHとlessの相性的な現象なのでしょうか？


### ゴール
要はWindowsでタブやペインを使える手段でssh接続したいということなので、
方法はwindows標準のsshコマンドでなくても良いし、
WindowsTerminalでなくても良いので、
lessで表示が乱れないようにしたいです。

コマンドプロンプト または PowerShell でssh接続しlessを用いたときの表示の乱れについて

WindowsPC上で作成したファイルをレンタルサーバにscpコマンドで転送してから、
サーバにsshでログインして、catコマンドでは正しく表示されましたが、
lessコマンドでは“binary file”ですか？と聞かれます。
vimで開くと文字化けしています。
file -i コマンドで確認すると
charset=us-ascii　のファイルはlessで表示できて
charset=utf-8　　のファイルはlessでは表示できませんでした。

環境変数$LANGをja_JP.UTF８に設定しましたが、変化はありませんでした。
lessやvimでutf-8を扱う方法を教えていただけますでしょうか。

```
[ ~]$ head -n 5 public_html/meguro-ecolife.tokyo/index2021.html
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<meta http-equiv="content-type" charset="UTF-8">
[ ~]$ less public_html/meguro-ecolife.tokyo/index2021.html
"public_html/meguro-ecolife.tokyo/index2021.html" may be a binary file. See it anyway?
[ ~]$

[ ~]$ echo $LANG　　　# 文字コードの設定
ja_JP.UTF8

# ファイルの文字コード
[ ~]$ file -i index.php
index.php: text/x-php; charset=us-ascii <------ OK
[ ~]$ file -i index2021.html
index2021.html: text/html; charset=utf-8 <------- NG
```

lessコマンドでus-asciiのファイルが文字化け

初めまして。mitonと申します。
知りたいことはタイトル通りです。
以下、学習希望者のスペックと知りたいポイントをまとめます。

### 学習希望者スペック

・ WEB制作の知識はHTMLとCSSのみ。SassやLessは学んだことがなく、導入方法を検索で調べた程度の知識。
・ JavaScriptの知識についてはライブラリを元に少し調整する程度。１から構築していけるだけの知識はない。
・ Stylusを学習したいと思ったのは ① Sass構文とLess構文のどちらにも対応している汎用性 ② 生のcssの形での入力も出来そう という２点の柔軟な印象から。
※ ②については生のcssしかいじれない方にデータを渡す可能性を考慮し、必要と感じた。

### 知りたいポイント

・ 生のCSSしか知らない状態のまま、Stulusを学ぶのはそもそも無謀だろうか？
┗ SassやLessを学んでからの方が理解しやすそうな印象を受けたが、出来ることなら学習コストは抑えたい。
・ Stylus学ぶ～業務に取り入れる中で発生した問題やリスクはあるか？
・ Stylusを学ぶ上で参考・ヒントになるサイトや書籍等は何か？

### 

Sassと比べ検索で拾える情報が少ないことから、初学者向けのものではないのでは？と不安を感じ、質問いたしました。
Stylusを業務に取り入れた方の感想等を拝見し、今後も移りゆくWEB制作の現場でも柔軟に対応していけるのでは、と魅力を感じたのですが…

多くの方からの様々なご意見をお待ちしております。
（誹謗・中傷除く）

### 追記事項
ここまでコメント下さった皆様、ありがとうございます。少しづつ返答させて頂きます。
以下、編集・追記依頼への回答となります。

■ 私自身の環境と懸念しているリスクについて

私自身は現在、少人数体制の制作会社でWEBデザイナーとして働いております。
会社での業務において、CSSプリプロセッサの導入はこれまでしてきませんでした。

リスクの可能性として考えていたのは、このような記号の省略等をする記法で制作したデータを
生のCSSしかいじったことがない環境の人たちが修正・調整しようとする際、混乱を招くことはないのだろうか、という点でした。

一個人として学ぶ上では何ら問題がない、むしろプラスに繋がっていく印象を頂いたコメントからも感じています。
個人的には、Sassの方が参考となる情報の量からも学びやすそうに感じたのですが、
上記の懸念を考慮した時、Stylusの方が記法の癖が少なく、現在の周囲の環境にも柔軟に合わせやすいのかな、と感じました。

また、SassまたはLessを学習した上でStylusを取り入れる、というのが一般的な学習ステップと感じたのですが、
SassやLessを学ばず最初からダイレクトにStylusを学ぶことで、学習コストを抑えることに繋がらないだろうか？と考え、
「出来ることなら学習コストは抑えたい」の一文を記述しました。

なお、状況説明について事細かにする事は少し憚られたため、
以上がご説明できる範囲、とさせて頂きます。

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

###前提・実現したいこと

現在エディターとしてAtomを使っており、独自開発のスクリプト言語が記載された.txt形式のファイルを編集することが多々あります。
このファイル編集中にカラースキームを適用させたいのですが、デフォルトのUIテーマOne DarkとシンタックステーマのAtom Darkでは.txtでは殆ど色付けして貰えないようです。
ファイル名を.cs形式や.java形式にすると見栄えが良かったので可能であれば.java形式向けのテーマの適用範囲に.txt形式を含めたいのですがどのファイルのどの部分を編集すれば良いのでしょうか？



###発生している問題・エラーメッセージ

.txtファイル（テキストファイル）にカラースキームが適用できない。


###試したこと
styles下のbase.less, colors.less, syntax-variables.lessに記載がありそうな気がするのですが、
あまりcssやLESSファイルに馴染みがないもので困惑しております。


###補足情報(言語/FW/ツール等のバージョンなど)
Atom 1.0.11

Atomエディタにて.txt（テキストファイル）にカラースキームを適用させたい

題の通り Bootstrap を特定のクラス内でのみ適応したい です。

すでに CSSを書いたところに bootstrapを適用したいのですが,
bootstrap を先に読み込んだ後に 自分で書いた css を読み込んでも 影響が強すぎます。

別途カスタマイズ用の CSSを作って 修正していってもいいのですが、
膨大な量のため 良い方法があれば教えてください。

よろしくお願いします。

---

ちなみに less という選択肢を発見しましたが、
実現できないと判断しました。
もし これでいけるのであれば 指摘をお願いします。

Bootstrap を特定のクラス内でのみ適応したい

題名にあるように
ターミナル上で、lessコマンドなどでASCIIファイルを開いた時に、文字に色が付いているようにしたいです。

このようなことはできるのでしょうか。
できるとしたら、どのようなファイル形式でどのように文字に色を付けられるのでしょうか。

lessなどでASCIIファイルを開いた時に文字に色が付くようにしたい

###前提・実現したいこと

wordpressのテーマのカスタマイズをしようとしています。
折角なので、流行りのwebpackを使って、ライブラリや編集したjs,css/lessを１つのfileとしてまとめて扱いたいです。

###発生している問題・エラーメッセージ
webpackでbootstrapのjs,cssと、上書き用の別ファイルとして作成したjs,css/lessをまとめたいのですが、css/lessのブラウザの読み込み順が分からず、bootstrapのcssの上書きができません。

現状は、カルーセルの画像の大きさを固定したいので

```
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: auto;
}
```

`height: auto;`を直接bootstrapを編集せずに、上書きしたいです。 

###該当のソースコード

 webpack.config.js
```js
const path = require('path');

module.exports = {
  entry: [
    './src/js/app.js'
  ],
  output: {
    path: path.join(__dirname, 'js'),
    filename: 'bundle.js'
  },
  // plugins: plugins,
  module: {
    loaders: [
    // 拡張子がcssの場合はcssのloaderを採用
    { test: /.css$/, loader: 'style-loader!css-loader' },

    // 拡張子がlessの場合はlessのloaderを採用
    { test: /.less$/, loader: 'style!css!less' },

    // bootstrap.cssの中に使うWebFontを（デフォルトで）base64エンコードされます
    { test: /.svg(?v=\d+.\d+.\d+)?$/, loader: 'url-loader?mimetype=image/svg+xml' },
    { test: /.woff(\d+)?(?v=\d+.\d+.\d+)?$/, loader: 'url-loader?mimetype=application/font-woff' },
    { test: /.eot(?v=\d+.\d+.\d+)?$/, loader: 'url-loader?mimetype=application/font-woff' },
    { test: /.ttf(?v=\d+.\d+.\d+)?$/, loader: 'url-loader?mimetype=application/font-woff' }
    ]
  }
};

```
src/js/app.js
```js
require('jquery');
require('bootstrap/dist/css/bootstrap.css');
require('bootstrap/dist/js/bootstrap');
require('font-awesome/css/font-awesome.css');
require('./../less/style.less');
```
src/less/style.less
```less
@color: orange;
body {
  background-color: @color;
}

.item img {
  width:100%;
}
 
#carousel_top {
  padding:0;
}

.cover {
  object-fit: cover;
  height: 250px;
  background-color: #ccc;
  border: 1px solid #ccc;
}

```
###試したこと
* requeirの順序を変えてみた

###補足情報(言語/FW/ツール等のバージョンなど
以下のモジュールを使用しています
```
  "devDependencies": {
    "css-loader": "^0.23.1",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.9.0",
    "imports-loader": "^0.6.5",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "postcss-loader": "^0.9.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1"
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.6.3",
    "jquery": "^3.0.0"
  }
```

webpackでのcss/lessの読み込み順

Railsでjquery-uiのCSSをprecompileした時に、アプリケーションルートが反映されません。

現在、URLが
https://ドメイン.co.jp/アプリ名/
となっています。
すると、jquery-uiのCSSをprecompileした時に、たとえばui-bg_flat_75_ffffff_40x100.pngでしたら、
https://ドメイン.co.jp/アプリ名/assets/jquery-ui/ui-bg_flat_75_ffffff_40x100-フィンガープリント.png
となることが想定です。実際にbin/rake assets:precompileすると
/public/assets/jquery-ui/ui-bg_flat_75_ffffff_40x100-フィンガープリント.png
が生成されます。

ですが、bootstrap_and_overrides.css.lessに以下のように書いたのですが
```less
.ui-widget-content {
	background-image: image-url("jquery-ui/ui-bg_flat_75_ffffff_40x100.png");
}
```
これがprecompileで
```css
url(/assets/jquery-ui/ui-bg_flat_75_ffffff_40x100-フィンガープリント.png
```
と、なってしまい、
https://ドメイン.co.jp/assets/jquery-ui/ui-bg_flat_75_ffffff_40x100-フィンガープリント.png
にアクセスしてしまって404 Not Foundになってしまいます。
現在は取り急ぎルートパスに配置していますが、precompileの度にcpしなければならないです。
このような利用方法ではどうすべきでしょうか、image-urlを使用するのは間違っているのでしょうか、ご指導下さい。よろしくお願いします。

環境
rails (4.1.14)
jquery-ui-rails (5.0.5)
less-rails (2.7.0)