CSS முதல் குறைவான மாற்றி

Input data
bfotool loadding
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Output data
bfotool loadding
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS முதல் குறைவான மாற்றி எளிமையானது

இந்த இலவச ஆன்லைன் கருவியானது CSS கோப்பை குறைவான கோப்பாக மாற்ற உங்களை அனுமதிக்கிறது. கீழே உள்ள படிவத்தில் உங்கள் CSS ஐ ஒட்டினால் போதும், அது உடனடியாக குறைந்ததாக மாற்றப்படும், எந்த மென்பொருளையும் பதிவிறக்கவோ நிறுவவோ தேவையில்லை. இலவசம்

CSS ஐ குறைவாக மாற்றுவது எப்படி?

படி 1: உங்கள் உள்ளீட்டைத் தேர்ந்தெடுக்கவும். தரவை உள்ளிடவும்.
படி 2: வெளியீட்டு விருப்பங்களை தேர்வு செய்யவும் (விரும்பினால்) வெளியீடு விருப்பங்கள்.
படி 3: வெளியீட்டை உருவாக்கவும்.

CSS முதல் குறைவான மாற்றி எடுத்துக்காட்டுகள்

CSS

.feature-url {
    background: #f7f7f7;
    text-align: center;
}
.feature-url li {
    list-style: none;
    display: inline-block;
    margin: 2px;
    border: 1px solid #e9ebee;
    text-align: center;
}
.feature-url li a {
    padding: 5px;
    color: blue;
    display: block;
    min-width: 70px;
}
.feature-url li a i {
    font-size: 20px;
}
.feature-url li a:hover {
    text-decoration: none;
    background: #e9ebee;
    color: #222;
}
.feature-url li.active a {
    background: #e9ebee;
    color: #222;
}

குறைவாக

@color1: #f7f7f7;
@color2: #e9ebee;
@color3: #222222;

.feature-url {
	background: @color1;
	text-align: center;
	li {
		list-style: none;
		display: inline-block;
		margin: 2px;
		border: 1px solid @color2;
		text-align: center;
		a {
			padding: 5px;
			color: blue;
			display: block;
			min-width: 70px;
			i {
				font-size: 20px;
			}
			&:hover {
				text-decoration: none;
				background: @color2;
				color: @color3;
			}
		}
		&.active a {
			background: @color2;
			color: @color3;
		}
	}
}
 
CSS இலிருந்து குறைவானது CSS பாணி வடிவமைப்பை LESS பாணி வடிவமைப்பிற்கு மாற்ற உதவுகிறது. CSS ஐ குறைந்த தரவுகளாக மாற்றுவதற்கும் பகிர்வதற்கும் இது மிகவும் எளிமையான மற்றும் எளிதான வழியாகும்.