CSS ਪੂਰਵ ਪ੍ਰੋਸੋਸੈਸਰ: ਸੰਖੇਪ ਜਾਣਕਾਰੀ, ਚੋਣ, ਐਪਲੀਕੇਸ਼ਨ

ਬਿਲਕੁਲ, ਸਾਰੇ ਤਜ਼ਰਬੇਕਾਰ ਖਾਕਾ ਡਿਜ਼ਾਇਨਰ ਪ੍ਰੀਪ੍ਰੋਸੈਸਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ. ਇਸ ਵਿਚ ਕੋਈ ਅਪਵਾਦ ਨਹੀਂ ਹੈ. ਜੇ ਤੁਸੀਂ ਇਸ ਗਤੀਵਿਧੀ ਵਿਚ ਸਫਲ ਹੋਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਇਹਨਾਂ ਪ੍ਰੋਗਰਾਮਾਂ ਬਾਰੇ ਨਾ ਭੁੱਲੋ. ਪਹਿਲੀ ਨਜ਼ਰ 'ਤੇ, ਉਹ ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਚਿਹਰੇ ਦੀ ਦਹਿਸ਼ਤ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੇ ਹਨ - ਇਹ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦੀ ਤਰ੍ਹਾਂ ਬਹੁਤ ਜ਼ਿਆਦਾ ਹੈ! ਵਾਸਤਵ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਦਿਨ ਵਿੱਚ CSS ਪੂਰਵਪ੍ਰੋਸੈਸਰਾਂ ਦੀਆਂ ਸਾਰੀਆਂ ਯੋਗਤਾਵਾਂ ਨੂੰ ਸਮਝ ਸਕਦੇ ਹੋ, ਅਤੇ ਜੇਕਰ ਤੁਸੀਂ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ, ਤਾਂ ਕੁਝ ਘੰਟੇ ਲਈ. ਭਵਿੱਖ ਵਿੱਚ, ਉਹ ਤੁਹਾਡੀ ਜ਼ਿੰਦਗੀ ਨੂੰ ਮਹੱਤਵਪੂਰਣ ਰੂਪ ਵਿੱਚ ਸਰਲ ਬਣਾਉਣਗੇ.

ਕਿਵੇਂ CSS ਪੂਰਵ ਪ੍ਰੋਸੈਸਰ ਪ੍ਰਗਟ ਹੋਏ

ਇਸ ਤਕਨਾਲੋਜੀ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਬਿਹਤਰ ਤਰੀਕੇ ਨਾਲ ਸਮਝਣ ਲਈ, ਆਪਣੇ ਆਪ ਨੂੰ ਵੈਬ ਪੇਜਾਂ ਦੇ ਵਿਜ਼ੂਅਲ ਨੁਮਾਇੰਦਿਆਂ ਦੇ ਵਿਕਾਸ ਦੇ ਇਤਿਹਾਸ ਵਿਚ ਸੰਖੇਪ ਵਿਚ ਲਿਓ.

ਜਦੋਂ ਜਨਤਕ ਇੰਟਰਨੈਟ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਸ਼ੁਰੂਆਤ ਕੀਤੀ ਗਈ ਸੀ, ਤਾਂ ਕੋਈ ਸਟਾਈਲ ਸ਼ੀਟ ਨਹੀਂ ਸਨ. ਦਸਤਾਵੇਜ਼ਾਂ ਦਾ ਡਿਜ਼ਾਇਨ ਬਿਲਕੁਲ ਬ੍ਰਾਉਜ਼ਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ. ਹਰ ਇੱਕ ਦੀ ਆਪਣੀ ਸਟਾਈਲ ਹੁੰਦੀ ਸੀ, ਜੋ ਕੁਝ ਟੈਗਸ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਸੀ. ਇਸ ਅਨੁਸਾਰ, ਤੁਸੀਂ ਕਿਹੜੇ ਬਰਾਊਜ਼ਰ ਨੂੰ ਖੋਲ੍ਹਿਆ ਹੈ ਇਸਦੇ ਵੱਖ-ਵੱਖ ਪੇਜਾਂ ਵੱਖਰੀਆਂ ਸਨ. ਨਤੀਜਾ ਗੜਬੜ, ਉਲਝਣ, ਵਿਕਾਸਕਾਰਾਂ ਲਈ ਸਮੱਸਿਆਵਾਂ ਹਨ.

1994 ਵਿਚ, ਨੋਕੋ ਸਾਇੰਸਿਸਟ ਹਾਇਕੋਨ ਲੀ ਨੇ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿਕਸਤ ਕੀਤੀ ਜਿਸ ਦਾ ਉਪਯੋਗ HTML ਦਸਤਾਵੇਜ਼ ਤੋਂ ਵੱਖਰੇ ਤੌਰ ਤੇ ਸਫ਼ੇ ਦੇ ਰੂਪ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰਨ ਲਈ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ. ਇਸ ਵਿਚਾਰ ਨੂੰ ਡਬਲਯੂ 3 ਸੀ ਕਨਸੋਰਟੀਅਮ ਦੇ ਨੁਮਾਇੰਦੇਾਂ ਲਈ ਬੁਲਾਇਆ ਗਿਆ ਸੀ, ਜਿਸ ਨੇ ਤੁਰੰਤ ਇਸ 'ਤੇ ਕੰਮ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰ ਦਿੱਤਾ. ਕੁਝ ਸਾਲ ਬਾਅਦ, CSS ਸਪੈਸੀਫਿਕੇਸ਼ਨ ਦਾ ਪਹਿਲਾ ਵਰਜਨ ਪ੍ਰਕਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਸੀ. ਫਿਰ ਇਹ ਲਗਾਤਾਰ ਸੁਧਾਰੇ, ਸੁਧਾਰੇ ਗਏ ... ਪਰ ਧਾਰਨਾ ਇਕੋ ਹੀ ਰਹੀ: ਹਰੇਕ ਸ਼ੈਲੀ ਨੂੰ ਕੁਝ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਿੱਤੀਆਂ ਗਈਆਂ ਹਨ.

CSS ਸਾਰਣੀਆਂ ਦੀ ਵਰਤੋਂ ਨੇ ਹਮੇਸ਼ਾਂ ਕੁਝ ਸਮੱਸਿਆਵਾਂ ਦਾ ਕਾਰਨ ਬਣਾਈਆਂ ਹਨ ਉਦਾਹਰਨ ਲਈ, ਸੰਦਰਭਕਰਤਾ ਨੂੰ ਸੰਪਤੀਆਂ ਨੂੰ ਲੜੀਬੱਧ ਕਰਨ ਅਤੇ ਸਮੂਹਿਕ ਕਰਨ ਵਿੱਚ ਅਕਸਰ ਮੁਸ਼ਕਲ ਆਉਂਦੀ ਹੈ, ਅਤੇ ਵਿਰਾਸਤ ਇੰਨੀ ਸੌਖੀ ਨਹੀਂ ਹੁੰਦੀ.

ਅਤੇ ਫਿਰ ਦੋ ਹਜ਼ਾਰਵੇਂ ਆ ਗਏ. ਪੇਸ਼ੇਵਰ ਫਰੰਟ-ਲਾਈਨ ਦੇ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਮਾਰਕਅੱਪ ਜ਼ਿਆਦਾਤਰ ਕਰਨਾ ਸ਼ੁਰੂ ਕੀਤਾ ਗਿਆ, ਜਿਸ ਲਈ ਸਟਾਈਲ ਦੇ ਨਾਲ ਲਚਕਦਾਰ ਅਤੇ ਗਤੀਸ਼ੀਲ ਕੰਮ ਮਹੱਤਵਪੂਰਨ ਸੀ. CSS, ਜੋ ਕਿ ਸਮੇਂ ਮੌਜੂਦ ਸੀ, ਨਵੇਂ ਬ੍ਰਾਉਜ਼ਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ ਪ੍ਰੀਫਿਕਸ ਅਤੇ ਟਰੈਕਿੰਗ ਸਹਾਇਤਾ ਦੀ ਲੋੜ ਸੀ. ਫਿਰ ਜਾਵਾਸਕਰਿਪਟ ਅਤੇ ਰੂਬੀ ਮਾਹਰਾਂ ਨੇ ਬਿਜ਼ਨਸ ਨੂੰ ਪ੍ਰਾਪਤ ਕੀਤਾ, ਪ੍ਰੀਪ੍ਰੋਸੈਸਰ ਬਣਾਉਣਾ - CSS ਲਈ ਐਡ-ਆਨ, ਇਸ ਵਿਚ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਕਰਨੀਆਂ.

ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ CSS: ਪ੍ਰੀਪ੍ਰੋਸੈਸਰਾਂ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

ਉਹ ਕਈ ਫੰਕਸ਼ਨ ਕਰਦੇ ਹਨ:

• ਬਰਾਊਜ਼ਰ ਅਗੇਤਰ ਅਤੇ ਹੈਕਸ ਇਕਾਈ ਕਰੋ;

• ਸੰਟੈਕਸ ਨੂੰ ਸੌਖਾ ਬਣਾਉ;

• ਬਗੈਰ ਅੰਦਰੂਨੀ ਚੋਣਕਾਰ ਨਾਲ ਕੰਮ ਕਰਨ ਦੀ ਆਗਿਆ;

• ਸਟਾਈਲਿੰਗ ਦੇ ਤਰਕ ਨੂੰ ਸੁਧਾਰਨਾ.

ਸੰਖੇਪ ਰੂਪ ਵਿੱਚ: ਪੂਰਵ ਪ੍ਰੋਸੈਸਰ CSS ਸਮਰੱਥਾਵਾਂ ਲਈ ਪ੍ਰੋਗਰਾਮਿੰਗ ਤਰਕ ਨੂੰ ਜੋੜਦਾ ਹੈ. ਹੁਣ ਸਟਾਇਲ ਨੂੰ ਸਟਾਈਲ ਦੇ ਆਮ ਗਣਨਾ ਦੁਆਰਾ ਨਹੀਂ ਪਰੰਤੂ ਕਈ ਸਾਧਾਰਣ ਜਿਹੀਆਂ ਚਾਲਾਂ ਅਤੇ ਪਹੁੰਚ ਦੀ ਮਦਦ ਨਾਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ: ਵੇਰੀਏਬਲ, ਫੰਕਸ਼ਨ, ਮਾਈਕਿਨਸ, ਚੱਕਰ, ਸ਼ਰਤਾਂ. ਇਸ ਤੋਂ ਇਲਾਵਾ, ਗਣਿਤ ਦੀ ਵਰਤੋ ਸੰਭਵ ਹੋ ਗਈ ਹੈ.

ਅਜਿਹੇ ਐਡ-ਇੰਨ ਦੀ ਪ੍ਰਸਿੱਧੀ ਵੇਖ ਕੇ, ਡਬਲਯੂ ਐਚ ਸੀ ਸੀ ਨੇ ਹੌਲੀ ਹੌਲੀ ਉਨ੍ਹਾਂ ਤੋਂ ਫੀਚਰ CSS ਕੋਡ ਤੇ ਜੋੜਨਾ ਸ਼ੁਰੂ ਕਰ ਦਿੱਤਾ. ਉਦਾਹਰਨ ਲਈ, ਕੈਲਕ () ਫੰਕਸ਼ਨ ਸਪੇਸ਼ੇਸ਼ਨ ਵਿੱਚ ਪ੍ਰਗਟ ਹੋਇਆ, ਜੋ ਕਿ ਬਹੁਤ ਸਾਰੇ ਬ੍ਰਾਉਜ਼ਰ ਦੁਆਰਾ ਸਮਰਥਿਤ ਹੈ. ਇਹ ਆਸ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਛੇਤੀ ਹੀ ਇਹ ਵੇਅਰਿਏਬਲਜ਼ ਸੈਟ ਕਰਨ ਅਤੇ ਮਾਈਕਿਨਸ ਬਣਾਉਣ ਦੇ ਸੰਭਵ ਹੋ ਜਾਣਗੇ. ਹਾਲਾਂਕਿ, ਇਹ ਭਵਿੱਖ ਵਿੱਚ ਦੂਰ ਹੋਵੇਗਾ, ਅਤੇ ਪੂਰਵ ਪ੍ਰੋਸੈਸਸਰ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹਨ ਅਤੇ ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਬਿਲਕੁਲ ਕੰਮ ਕਰ ਰਹੇ ਹਨ.

ਪ੍ਰਸਿੱਧ CSS preprocessors ਸਾਸ

ਇਹ 2007 ਵਿੱਚ ਵਿਕਸਤ ਕੀਤਾ ਗਿਆ ਸੀ ਇਹ ਅਸਲ ਵਿੱਚ ਹੈਮਲ ਦੇ ਇੱਕ ਭਾਗ, HTML ਟੈਪਲੇਟ ਇੰਜਣ ਸੀ. CSS ਤੱਤਾਂ ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਨਵੇਂ ਫੀਚਰ ਰੇਲਜ਼ ਤੇ ਰੂਬੀ ਤੇ ਡਿਵੈਲਪਰਸ ਦੇ ਡਿਵੈਲਪਰਾਂ ਦੇ ਸੁਆਦ ਵਿੱਚ ਆ ਗਏ ਹਨ, ਜੋ ਕਿ ਇਸ ਨੂੰ ਹਰ ਥਾਂ ਫੈਲਾਉਣਾ ਸ਼ੁਰੂ ਕਰ ਦਿੱਤਾ ਹੈ. ਸਾਸ ਵਿਚ ਬਹੁਤ ਸਾਰੇ ਮੌਕਿਆਂ ਨੂੰ ਦਿਖਾਇਆ ਗਿਆ ਹੈ, ਜੋ ਹੁਣ ਕਿਸੇ ਵੀ ਪੂਰਵ ਪ੍ਰੋਸੋਸੈਸਰ ਵਿਚ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ: ਵੇਰੀਏਬਲਾਂ, ਏਮਬੈਡਿੰਗ ਚੋਣਕਾਰ, ਮਿਕਸਿਨ (ਫਿਰ ਵੀ, ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਆਰਗੂਮਿੰਟ ਨਹੀਂ ਦੇ ਸਕਦੇ).

ਸਾਸ ਵਿਚ ਵੇਅਰਿਏਬਲ ਘੋਸ਼ਣਾ

ਵੇਅਰਿਏਬਲ ਨੂੰ $ ਨਿਸ਼ਾਨ ਦੇ ਕੇ ਘੋਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ. ਉਨ੍ਹਾਂ ਵਿਚ, ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਉਹਨਾਂ ਦੇ ਸੈਟਾਂ ਨੂੰ ਬਚਾ ਸਕਦੇ ਹੋ, ਉਦਾਹਰਣ ਲਈ: "$ borderierolid: 1px solid red;" ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਬਾਰਡਰਸੋਲਡ ਨਾਂ ਦੀ ਵੈਰੀਐਬਲ ਘੋਸ਼ਿਤ ਕੀਤਾ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ 1px ਦਾ ਘਟੀਆ ਲਾਲ ਪਾਇਆ ਗਿਆ ਹੈ. ਹੁਣ, ਜੇ CSS ਵਿੱਚ ਸਾਨੂੰ 1px ਦੀ ਚੌੜਾਈ ਨਾਲ ਲਾਲ ਸਰਹੱਦ ਬਣਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, ਤਾਂ ਪ੍ਰੌਜੈਕਟ ਦੇ ਨਾਮ ਤੋਂ ਬਾਅਦ ਇਹ ਵੇਰੀਏਬਲ ਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ. ਘੋਸ਼ਣਾ ਦੇ ਬਾਅਦ, ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਬਦਲਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ. ਕਈ ਬਿਲਟ-ਇਨ ਫੰਕਸ਼ਨ ਉਪਲਬਧ ਹਨ. ਉਦਾਹਰਨ ਲਈ, $ FF5050 ਮੁੱਲ ਦੇ ਨਾਲ $ redColor ਵੇਰੀਏਬਲ ਘੋਸ਼ਿਤ ਕਰੋ ਹੁਣ, CSS ਵਿੱਚ, ਕਿਸੇ ਤੱਤ ਦੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ, ਅਸੀਂ ਫੋਂਟ ਰੰਗ ਸੈੱਟ ਕਰਨ ਲਈ ਇਸਦਾ ਉਪਯੋਗ ਕਰਦੇ ਹਾਂ: p {color: $ redColor; }. ਕੀ ਤੁਸੀਂ ਰੰਗ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ? ਕੰਮ ਨੂੰ ਗੂਡ਼ਾਪਨ ਜਾਂ ਹਲਕਾ ਕਰੋ. ਇਹ ਇਸ ਤਰਾਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ: ਪੀ {color: darken ($ redColor, 20%); }. ਨਤੀਜੇ ਵਜੋਂ, ਲਾਲ ਰੰਗ ਦਾ ਰੰਗ 20% ਹਲਕਾ ਹੋ ਜਾਵੇਗਾ.

ਸਾਸ ਵਿੱਚ ਬਹੁਤ ਸਾਰੇ ਬਿਲਟ-ਇਨ ਫੰਕਸ਼ਨ ਹਨ. ਅਸੀਂ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਘੱਟੋ ਘੱਟ ਉਹਨਾਂ ਨਾਲ ਜਾਣੂ ਹੋਵੋ, ਅਤੇ ਵਧੀਆ - ਸਿੱਖੋ

ਨੇਸਟਿੰਗ

ਪਹਿਲਾਂ, ਆਲ੍ਹਣੇ ਨੂੰ ਦਰਸਾਉਣ ਲਈ, ਸਾਨੂੰ ਲੰਬੇ ਅਤੇ ਅਸੁਵਿਧਾਜਨਕ ਡਿਜ਼ਾਈਨ ਵਰਤਣੇ ਪੈਂਦੇ ਸਨ. ਕਲਪਨਾ ਕਰੋ ਕਿ ਸਾਡੇ ਕੋਲ ਇੱਕ div ਹੈ ਜਿਸ ਵਿੱਚ p ਝੂਠ ਹੈ, ਅਤੇ ਇਸ ਵਿੱਚ, ਬਦਲੇ ਵਿੱਚ, ਸਪੈਨ ਹੈ. Div ਲਈ, ਸਾਨੂੰ ਫੋਂਟ ਰੰਗ ਨੂੰ ਲਾਲ ਰੰਗ ਲਈ, ਪੀ-ਪੀਲ ਲਈ, ਸਪੈਨ-ਗੁਲਾਬੀ ਲਈ ਸੈੱਟ ਕਰਨ ਦੀ ਲੋੜ ਹੈ. ਸਧਾਰਨ CSS ਵਿੱਚ, ਇਹ ਇਸ ਤਰਾਂ ਕੀਤਾ ਜਾਵੇਗਾ:

Div {

ਰੰਗ: ਲਾਲ;

}

Div p {

ਰੰਗ: ਪੀਲੇ;

}

Div p span {

ਰੰਗ: ਗੁਲਾਬੀ;

}

CSS ਪੂਰਵ ਪ੍ਰੋਸੈਸਰ ਦੇ ਨਾਲ, ਹਰ ਚੀਜ਼ ਅਸਾਨ ਅਤੇ ਵਧੇਰੇ ਸੰਖੇਪ ਬਣ ਜਾਂਦੀ ਹੈ:

Div {

ਰੰਗ: ਲਾਲ;

ਪੀ {

ਰੰਗ: ਪੀਲੇ;

.span {

ਰੰਗ: ਗੁਲਾਬੀ;

}

}

}

ਐਲੀਮੈਂਟਸ ਦਾ ਸ਼ਾਬਦਿਕ ਅਰਥ ਹੈ "ਇੱਕ" ਨੂੰ ਦੂਜੀ ਵਿੱਚ ਪਾਓ.

ਪ੍ਰੀਪ੍ਰੋਸੈਸਰ ਨਿਰਦੇਸ਼

@import ਡਾਇਰੈਕਟਿਵ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਫਾਈਲਾਂ ਅਯਾਤ ਕਰ ਸਕਦੇ ਹੋ ਉਦਾਹਰਣ ਲਈ, ਸਾਡੇ ਕੋਲ ਫੌਂਟ.sass ਨਾਮ ਦੀ ਇੱਕ ਫਾਈਲ ਹੈ, ਜਿਸ ਵਿੱਚ ਫੌਂਟਾਂ ਲਈ ਸਟਾਈਲ ਦੀ ਘੋਸ਼ਣਾ ਕੀਤੀ ਜਾਂਦੀ ਹੈ. ਅਸੀਂ ਇਸ ਨੂੰ ਮੁੱਖ ਸਟਾਈਲ.sass ਫਾਇਲ ਨਾਲ ਜੋੜਦੇ ਹਾਂ: @import 'fonts' ਹੋ ਗਿਆ! ਸਟਾਈਲ ਦੇ ਨਾਲ ਇੱਕ ਵੱਡੀ ਫਾਈਲ ਦੀ ਬਜਾਏ, ਸਾਡੇ ਕੋਲ ਬਹੁਤ ਸਾਰੇ ਹਨ ਜੋ ਤੁਸੀਂ ਲੋੜੀਂਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਜਲਦੀ ਅਤੇ ਅਸਾਨੀ ਨਾਲ ਐਕਸੈਸ ਕਰਨ ਲਈ ਕਰ ਸਕਦੇ ਹੋ.

ਮਿਕਸਿਨਸ

ਸਭ ਤੋਂ ਦਿਲਚਸਪ zadumok ਦਾ ਇੱਕ. ਇਹ ਇਕ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਇੱਕ ਸੈਟ ਇੱਕ ਲਾਈਨ ਵਿੱਚ ਨਿਰਦਿਸ਼ਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ. ਇਸ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰੋ:

@mixin largeFont {

ਫੌਂਟ-ਫੈਮਿਲੀ: 'ਟਾਈਮਸ ਨਿਊ ਰੋਮਨ';

ਫੋਂਟ-ਸਾਈਜ਼: 64px;

ਲਾਈਨ-ਉਚਾਈ: 80px;

ਫੌਂਟ-ਭਾਰ: ਬੋਲਡ;

}

ਕਿਸੇ ਪੇਜ 'ਤੇ ਇਕ ਐਲੀਮੈਂਟ ਨੂੰ ਮਿਕਸਿਨ ਲਗਾਉਣ ਲਈ, @ ਇੰਨਿਕੋਨਾਈਜ਼ ਡਾਇਰੈਕਟਿਵ ਦੀ ਵਰਤੋਂ ਕਰੋ. ਉਦਾਹਰਣ ਲਈ, ਅਸੀਂ ਇਸ ਨੂੰ h1 ਸਿਰਲੇਖ ਤੇ ਲਾਗੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ. ਹੇਠ ਦਿੱਤੀ ਨਿਰਮਾਣ ਪ੍ਰਾਪਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ: h1 {@ ਸ਼ਾਮਲ: largeFont; }

ਮਿਕਸਿਨ ਤੋਂ ਸਾਰੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਐਲੀਮੈਂਟ H1 ਨੂੰ ਨਿਰਧਾਰਤ ਕੀਤੀਆਂ ਜਾਣਗੀਆਂ.

ਘੱਟ ਪ੍ਰੀਪ੍ਰੋਸੈਸਰ

ਸਾਸ ਸਿਟੈਕਸ ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੀ ਯਾਦ ਦਿਵਾਉਂਦਾ ਹੈ. ਜੇ ਤੁਸੀਂ ਇੱਕ ਅਜਿਹੇ ਵਿਕਲਪ ਦੀ ਤਲਾਸ਼ ਕਰ ਰਹੇ ਹੋ ਜੋ ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਲਈ CSS ਸਿੱਖਣ ਵਾਲੇ ਵਿਦਿਆਰਥੀਆਂ ਲਈ ਜ਼ਿਆਦਾ ਉਚਿਤ ਹੋਵੇ, ਤਾਂ ਘੱਟ ਦੇਖੋ. ਇਹ 2009 ਵਿੱਚ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ ਸੀ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾ ਮੂਲ CSS ਸੰਟੈਕਸ ਦਾ ਸਮਰਥਨ ਹੈ, ਇਸ ਲਈ ਅਜਨਬੀ ਨਾਲ ਇਹ ਸਿੱਖਣਾ ਅਸਾਨ ਹੈ ਜੋ ਕੋਡੇਰ ਦੇ ਪ੍ਰੋਗਰਾਮਿੰਗ ਨਾਲ ਜਾਣੂ ਨਹੀਂ ਹਨ.

ਵੇਰੀਏਬਲ @ ਸਿੰਬਲ ਨਾਲ ਘੋਸ਼ਿਤ ਕੀਤੇ ਗਏ ਹਨ ਉਦਾਹਰਨ ਲਈ: @ ਫੌਂਟਸੀਜ਼: 14 ਪੈਕਸ; ਸੇਸ ਨੇ ਉਸੇ ਸਿਧਾਂਤ ਤੇ ਕੰਮ ਕੀਤਾ ਹੈ ਜਿਵੇਂ ਕਿ ਸਾਸ ਮਿਕਸਿਨਸ ਨੂੰ ਇਸ ਪ੍ਰਕਾਰ ਘੋਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ:. ਵੱਡਾ ਫ਼ੌਂਟ () {font-family: 'Times New Roman'; ਫੋਂਟ-ਸਾਈਜ਼: 64px; ਲਾਈਨ-ਉਚਾਈ: 80px; ਫੌਂਟ-ਭਾਰ: ਬੋਲਡ; }. ਕੁਨੈਕਸ਼ਨ ਲਈ, ਤੁਹਾਨੂੰ ਪੂਰਵ-ਪ੍ਰੋਸੋਸੈਸਰਾਂ ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ - ਚੁਣੇ ਹੋਏ ਤੱਤ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ ਨਵਾਂ ਬਨਾਉਣ ਵਾਲਾ ਮਿਕਸਿਨ ਸ਼ਾਮਿਲ ਕਰੋ. ਉਦਾਹਰਨ ਲਈ: h1 {.largefont; }.

ਸਟਾਈਲਸ

ਇਕ ਹੋਰ ਪੂਰਵ ਪ੍ਰੋਸੋਸੈਸਰ 2011 ਵਿੱਚ ਇੱਕ ਹੀ ਲੇਖਕ ਨੇ ਸੰਸਾਰ ਨੂੰ ਜੇਡ, ਐਕਸਪ੍ਰੈੱਸ ਅਤੇ ਹੋਰ ਉਪਯੋਗੀ ਉਤਪਾਦਾਂ ਦੇ ਕੇ ਤਿਆਰ ਕੀਤਾ.

ਵੇਰੀਏਬਲ ਨੂੰ ਦੋ ਤਰੀਕਿਆਂ ਨਾਲ ਘੋਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ - ਸਪੱਸ਼ਟ ਜਾਂ ਸੰਕੇਤਕ ਰੂਪ ਵਿੱਚ. ਉਦਾਹਰਣ ਵਜੋਂ: font = 'ਟਾਈਮਜ਼ ਨਿਊ ਰੋਮਨ'; ਇੱਕ ਸੰਪੂਰਨ ਵਿਕਲਪ ਹੈ. ਪਰ $ font = 'ਟਾਈਮਜ ਨਿਊ ਰੋਮਨ' - ਸਪੱਸ਼ਟ. ਮਿਕਸਿਨਾਂ ਨੂੰ ਘੋਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਸੰਧੀ ਨਾਲ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ. ਸੰਟੈਕਸ ਇਹ ਹੈ: redColor () ਰੰਗ ਲਾਲ ਹੁਣ ਅਸੀਂ ਇਸਨੂੰ ਐਲੀਮੈਂਟ ਵਿੱਚ ਜੋੜ ਸਕਦੇ ਹਾਂ, ਉਦਾਹਰਣ ਲਈ: h1 redColor ();

ਪਹਿਲੀ ਨਜ਼ਰ 'ਤੇ, Stylus ਸਮਝ ਤੋਂ ਬਾਹਰ ਹੈ. ਕਿੱਥੇ "ਮੂਲ" ਬ੍ਰੈਕੇਟ ਅਤੇ ਸੈਮੀਕੋਲਨ ਹਨ? ਪਰ ਜੇ ਤੁਸੀਂ ਇਸ ਵਿੱਚ ਡੁਬ ਰਹੇ ਹੋ, ਹਰ ਚੀਜ਼ ਬਹੁਤ ਸਪੱਸ਼ਟ ਹੋ ਜਾਂਦੀ ਹੈ. ਹਾਲਾਂਕਿ, ਯਾਦ ਰੱਖੋ ਕਿ ਇਸ ਪੂਰਵ ਪ੍ਰੋਸੋਸੈਸਰ ਦੇ ਨਾਲ ਇੱਕ ਲੰਮਾ ਵਿਕਾਸ ਕਲਾਸਿਕ CSS ਸਿੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਤੁਸੀਂ "ਮੁੱਕਣ" ਕਰ ਸਕਦੇ ਹੋ. ਇਹ ਕਈ ਵਾਰ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ "ਸਾਫ" ਸਟਾਈਲ ਨਾਲ ਕੰਮ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ.

ਕਿਹੜਾ ਪ੍ਰੀਪ੍ਰੋਸੈਸਰ ਮੈਨੂੰ ਚੁਣਨਾ ਚਾਹੀਦਾ ਹੈ?

ਅਸਲ ਵਿੱਚ, ਇਹ ... ਕੋਈ ਫਰਕ ਨਹੀਂ ਪੈਂਦਾ. ਸਾਰੇ ਵਿਕਲਪ ਲਗਭਗ ਇੱਕੋ ਜਿਹੀਆਂ ਸੰਭਾਵਨਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਹਰ ਇੱਕ ਦੀ ਸਿਟੈਕਸ ਵੱਖਰੀ ਹੈ. ਅਸੀਂ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਅੱਗੇ ਵੱਧਦੇ ਹੋ:

• ਜੇ ਤੁਸੀਂ ਇੱਕ ਪ੍ਰੋਗਰਾਮਰ ਹੋ ਅਤੇ ਕੋਡ ਦੇ ਰੂਪ ਵਿੱਚ ਸਟਾਈਲ ਨਾਲ ਕੰਮ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਸਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ;
• ਜੇ ਤੁਸੀਂ ਲੇਆਊਟ ਡਿਜ਼ਾਇਨਰ ਹੋ ਅਤੇ ਆਮ ਖਾਕੇ ਦੇ ਨਾਲ ਸਟਾਈਲ ਨਾਲ ਕੰਮ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਘੱਟ ਧਿਆਨ ਦਿਓ;
• ਜੇ ਤੁਸੀਂ ਥੋੜ੍ਹੀ ਮਾਤਰਾ ਨੂੰ ਪਸੰਦ ਕਰਦੇ ਹੋ, ਤਾਂ ਸਟਾਈਲਸ ਦੀ ਵਰਤੋਂ ਕਰੋ.

ਸਾਰੇ ਵਿਕਲਪਾਂ ਲਈ ਬਹੁਤ ਸਾਰੀਆਂ ਦਿਲਚਸਪ ਲਾਇਬ੍ਰੇਰੀਆਂ ਉਪਲਬਧ ਹਨ ਜੋ ਵਿਕਾਸ ਨੂੰ ਹੋਰ ਆਸਾਨ ਬਣਾ ਸਕਦੇ ਹਨ. ਸਾਸ ਦੇ ਯੂਜ਼ਰਸ ਨੂੰ ਕੰਪਾਸ ਵੱਲ ਧਿਆਨ ਦੇਣ ਦੀ ਸਲਾਹ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ - ਬਹੁਤ ਸਾਰੇ ਬਿਲਟ-ਇਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਾਲਾ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਸੰਦ. ਉਦਾਹਰਨ ਲਈ, ਇਸਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਦੇ ਬਾਅਦ, ਤੁਹਾਨੂੰ ਵਿਕਰੇਤਾ ਅਗੇਤਰਾਂ ਬਾਰੇ ਚਿੰਤਾ ਨਹੀਂ ਪਵੇਗੀ. ਗਰਿੱਡ ਦੇ ਨਾਲ ਸਧਾਰਨ ਕੰਮ ਰੰਗਾਂ, sprites ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਸਹੂਲਤਾਂ ਹਨ. ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਐਲਾਨੇ ਗਏ ਮਾਈਕਿਨਸ ਉਪਲਬਧ ਹਨ. ਇਸ ਟੂਲ ਨੂੰ ਕੁਝ ਦਿਨ ਦਿਓ - ਜਿਸ ਨਾਲ ਭਵਿੱਖ ਵਿੱਚ ਤੁਹਾਨੂੰ ਬਹੁਤ ਸਾਰਾ ਸਮਾਂ ਅਤੇ ਊਰਜਾ ਬਚਾਏਗਾ.