Advertisement
  1. Web Design
  2. Sass

Sass থেকে CSS: কম্পাইল করার সময় Whitespace কিভাব প্রিজার্ভ করবেন

Scroll to top
Read Time: 2 min

Bengali (বাংলা) translation by Arnab Wahid (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 প্লাগিন দিয়ে এই সমস্যার সমাধান শিখবঃ

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 টাস্কটি অনেক কার্যকর। এই ক্ষেত্রে আমরা এটা জায়গা মত হোয়াইট স্পেস বসাতে ব্যবহার করলাম।

রিসোর্স

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.