cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="sc1-home-header">
	<div class="sc1-home-header__left-nav">
		left
		<div class="sc1-home-header-circle">
			<div class="sc1-home-header-circle__outer-circle">
				<div class="sc1-home-header-circle__inner-circle">
				</div>
			</div>
		</div>
	</div>
	<div class="sc1-home-header__right-nav">
		right
		<div class="sc1-home-header-circle">
			<div class="sc1-home-header-circle__outer-circle sc1-home-header-circle__outer-circle--inside-hover">
				<div class="sc1-home-header-circle__inner-circle">
				</div>
			</div>
		</div>
	</div>
</div>
            
          
!
            
              .sc1
	&-home
		//ここまで「.sc1-home」がECSS的な接頭語
		//以下通常のBEM
	
		//block
		&-header
			//element
			&__left-nav
				float: left
				margin: 50px 0 0 50px
		
			&__right-nav
				float: right
				margin: 50px 50px 0 0

		//block
		&-header-circle
			//&は「.sc1-home-header-circle」という文字列を受け取る
			//その為、変数名&blockにその値が入る
			$block: &

			//element
			&__outer-circle
				margin: auto
				width: 200px
				height: 200px
				box-sizing: border-box
				border: solid 2px
				border-radius: 50%

				&:hover
					background-color: red
	
				&--inside-hover
					&:hover
						background-color: transparent
						
						//同ブロックだが、異なるエレメントを指し示す場合には、
						//先程の変数を使えば良い
						//少なくともECSS的な接頭語の変更には対応することが出来る
						& > #{$block}__inner-circle
							background-color: yellow			
			//block
			&__inner-circle
				width: 100px
				height: 100px
				margin: 48px 48px
				box-sizing: border-box
				border: solid 2px
				border-radius: 50%
				background: yellowgreen
            
          
!
999px
Loading ..................

Console