() translation by (you can also view the original English article)
স্যাস সাইফের ভিজুয়াল ঠিক রাখতে, সিএসেস হোয়াইট স্পেস সহ কম্পাইল করতে চান? এই আর্টিকেলে দেখে নিন সেটা কিভাবে করতে হয়!
কুইক টিপ
স্যাস এক্সপ্যান্ডেড ফর্মে কম্পাইল করলে এটা সম্ভব, কমপ্রেসড অবস্থায় সম্ভব না।
সমস্যা
ধরেন অনেকগুলো পার্শিয়াল স্যাস ফাইল আছে, যেগুলার ফরম্যাটিং এমনঃ
1 |
/******************************************************************************
|
2 |
*
|
3 |
* Partial.
|
4 |
*
|
5 |
*****************************************************************************/
|
6 |
body { |
7 |
font-size: 100%; |
8 |
}
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
এগুলা কম্পাইল করলে যেমন দেখা যায়ঃ
1 |
/******************************************************************************
|
2 |
*
|
3 |
* Partial.
|
4 |
*
|
5 |
*****************************************************************************/
|
6 |
body { |
7 |
font-size: 100%; |
8 |
}
|
9 |
|
10 |
/******************************************************************************
|
11 |
*
|
12 |
* Partial.
|
13 |
*
|
14 |
*****************************************************************************/
|
15 |
body { |
16 |
font-size: 100%; |
17 |
}
|
18 |
|
19 |
/******************************************************************************
|
20 |
*
|
21 |
* Partial.
|
22 |
*
|
23 |
*****************************************************************************/
|
24 |
body { |
25 |
font-size: 100%; |
26 |
}
|
কিন্তু আমাদের দরকার এইরকমঃ
1 |
/******************************************************************************
|
2 |
*
|
3 |
* Partial.
|
4 |
*
|
5 |
*****************************************************************************/
|
6 |
body { |
7 |
font-size: 100%; |
8 |
}
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
/******************************************************************************
|
16 |
*
|
17 |
* Partial.
|
18 |
*
|
19 |
*****************************************************************************/
|
20 |
body { |
21 |
font-size: 100%; |
22 |
}
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
/******************************************************************************
|
30 |
*
|
31 |
* Partial.
|
32 |
*
|
33 |
*****************************************************************************/
|
34 |
body { |
35 |
font-size: 100%; |
36 |
}
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
সমাধানঃ
আমরা grunt-replace প্লাগিন দিয়ে এই সমস্যার সমাধান শিখবঃ
The Command Line for Web Design: Automation With Grunt
New Short Course: Setting Up a Pro Front-End Development Workflow
grunt-replace লোড করুন। package.json ফাইল এমন দেখাবেঃ
1 |
"devDependencies": { |
2 |
"grunt": "^1.0.1", |
3 |
"grunt-replace": "^1.0.1", |
4 |
"grunt-sass": "^2.0.0", |
5 |
"load-grunt-tasks": "^3.5.2" |
6 |
}
|
এরপর আমরা grunt.js ফাইলে কাজ করবঃ
1 |
// Task: replace.
|
2 |
replace: { |
3 |
css: { |
4 |
options: { |
5 |
usePrefix: false, |
6 |
patterns: [ |
7 |
{
|
8 |
match: '/**/', |
9 |
replacement: '' |
10 |
}
|
11 |
]
|
12 |
},
|
13 |
files: [ |
14 |
{
|
15 |
'css/styles.css': 'css/styles.css' // for single file |
16 |
}
|
17 |
]
|
18 |
}
|
19 |
}
|
ম্যাচ
স্যাস ফাইলে রিপ্লেস টাস্ট রান করুন, কম্পাইল করার পরে। ( বিস্তারিত জানতে সোর্স ফাইল দেখুন )
patterns অপশনটি খেয়াল করুনঃ
1 |
match: '/**/', |
2 |
replacement: '' |
এখানে প্রতি /**/ ইন্সট্যান্স একটা এম্পটি স্ট্রিং দিয়ে রিপ্লেস হয়ে যাবে। আর /**/ এর জায়গায় ব্ল্যাংক স্পেস বসবে।
1 |
/******************************************************************************
|
2 |
*
|
3 |
* Partial.
|
4 |
*
|
5 |
*****************************************************************************/
|
6 |
body { |
7 |
font-size: 100%; |
8 |
}
|
9 |
/**/
|
10 |
/**/
|
11 |
/**/
|
12 |
/**/
|
13 |
/**/
|
14 |
/**/
|
15 |
/**/
|
পরিশেষ
স্ট্রিং ফাইন্ড এন্ড রিপ্লেস করতে Grunt-replace টাস্কটি অনেক কার্যকর। এই ক্ষেত্রে আমরা এটা জায়গা মত হোয়াইট স্পেস বসাতে ব্যবহার করলাম।
রিসোর্স
